Contenidos digitales para webs de empresas 75 consejos practicos e_mo_tools

CONTENIDOS DIGITALES
PARA WEB DE EMPRESAS:
75 consejos prácticos
Amalio A. Rey
www.emotools.com
www.amaliorey.com

¿Te gustaría recibir e-mails
como estos? (1)
 “ES TAN INTERESANTE QUE LA HE
RECOMENDADO A MIS COLABORADORES”
 “SUS IDEAS ME HAN LLAMADO LA ATENCIÓN DE
VERDAD”
 “ME HA DADO GANAS DE MOVERME POR EL
SITIO Y EXPLORAR”
 “ME HA HECHO HACER CLIC EN TODOS LOS
ENLACES”

Amalio A. Rey - www.emotools.com

como estos? (2)
 “TRAS LEER SU OPINIÓN, SOLO TUVE QUE
COMPRAR”
 “SU TEXTO ME HA HECHO CAMBIAR DE PUNTO
DE VISTA”
 “LO QUE CUENTA PEGA EXACTAMENTE CON
NUESTRA SITUACIÓN. PARECE COMO SI
ESTUVIERA HABLANDO DE NOSOTROS”
 “LO QUE OFRECE ES EXACTAMENTE LO QUE
ESTABAMOS BUSCANDO”


como estos? (3)
 “USTED SÍ QUE SABE DE LO QUE HABLA”
 “ME HA AYUDADO A RESOVER MI PROBLEMA”
 “ES TAN GENIAL, QUE NO PODÍA DEJAR DE
SEGUIR HACIENDO CLIC”
 “DE ACUERDO, HA CONSEGUIDO SEDUCIRME
CON SUS CONTENIDOS”
 “ME HA HECHO SALTAR DE LA SILLA, Y
PONERME EN ACCIÓN”
 “ME HA APORTADO TONELADAS DE BUENAS
IDEAS”

como estos? (4)
 “ERA ESTO PRECISAMENTE LO QUE
NECESITABA”
 “ME HE SENTIDO COMO SI ESTUVIERA
HABLANDO CONMIGO MISMO”
 “HE SENTIDO QUE REALMENTE SE ME
ESCUCHABA”
 “PROPORCIONA MUCHA MÁS INFORMACIÓN DE
LA QUE ESTÁ OBLIGADO A DAR. MUCHAS
GRACIAS”
 “SU WEB ES MUY GENEROSA. OFRECE SIN
EXIGIR NADA”

OBJETIVOS
 Analizar los errores típicos que cometen las
empresas en el diseño de sus web corporativas.
 Comentar los requisitos específicos para la redacción
de contenidos digitales: ¿cómo redactar para la
web?
 Definir los requisitos que debe cumplir una web,
desde el punto de vista de los contenidos, para
mejorar la comunicación y el marketing de la
empresa.
 Demostrar que una web corporativa, con unos
contenidos de calidad, puede contribuir
notablemente a mejorar la capacidad de marketing
de una empresa con escasos recursos.

OBJETIVOS
 Presentar distintas herramientas para mejorar el
diseño de las web corporativas, en particular,
recomendaciones de disciplinas como la “Usabilidad”
y la “Arquitectura de la Información”.
 Discutir las lecciones que se pueden extraer de un
conjunto seleccionado de páginas web corporativas
de empresas que operan en los mismos subsectores
de las de los participantes (“benchmarking sectorial
de páginas-web”)


ADVERTENCIA:
enfoque de la ponencia
 LO QUE NO ES: Esta NO es una ponencia
estrictamente orientada a informaticos o
diseñadores de web. No es para técnicos
programadores o diseñadores gráficos.
 LO QUE ES: Es una ponencia que adopta sobre
todo la perspectiva del USUARIO y un claro
enfoque de MARKETING. Nos colocamos
abiertamente del lado del que visita la web, no
del que la diseña.

Introducción
¿Contenidos Digitales?

¿Qué son los “contenidos
digitales”?
 Acepción maximalista: El Diseño, la Programación y los
(Hiper)textos de una web son contenidos = Se implican
en la comunicación con el usuario.
 Acepción más estrecha: información y servicios digitales
de interés para el usuario:¡¡¡lo que la web “contiene” de
interés para el usuario!!!.
Los contenidos cumplen una triple función:
 Informan al usuario (contenidos informativos)

 Le orientan en la navegación (contenidos “orientativos”)

 Le inducen a la acción.


¿Qué hace singular a los
“contenidos digitales”?
 Un soporte donde el poder está TOTALMENTE en
manos de los usuarios: 1) El coste de cambiar es un
clic de ratón, 2) Los usuarios pueden seguir caminos
no previstos por el autor
 Los lectores no leen, sino que “escanean”, “saltan”
sobre los contenidos en busca de indicios de relevancia
y calidad.
 El hipertexto es la base de todo: la disposición de los
contenidos se hace más compleja (más “profunda” y
más “entrelazada”)- ¡¡Viva el Desorden!!

Ideas clave (1)
 En comunicación digital, lo SIMPLE y BREVE,
dos veces bueno.
 Las PALABRAS (los textos) tienen primacía
sobre otros tipos de contenidos.
 La FUNCIONALIDAD siempre por encima del
diseño gráfico: MENOS GLAMOUR Y MAS
ORDEN.
 MÍNIMO TIEMPO DE DESCARGA. Es el factor
más importante, con diferencia.

Ideas clave (2)
 Escribir para la web es diferente. Evita un “copy-paste”
del folleto de la empresa.

 El lenguaje debe ser objetivo, evita los adjetivos y
adverbios estridentes. Utiliza datos y argumentos
convincentes para respaldar tus promesas.

 Los visitantes no “leen” palabra por palabra,
“escanean”, “saltan” sobre los contenidos: Ayúdalos a
captar de un vistazo la esencia de un texto.

 Una buena página-web deber ser: 1) Simple, 2) Clara,
3) Constante, 4) Apropiada, 5) Usable

La web corporativa
como herramienta de
marketing

La web corporativa como
herramienta de marketing
 La web corporativa refleja la imagen, filosofía,
productos y servicios de una empresa =
Referencia digital a escala global.
 Ya es habitual que una persona o empresa que
quiere conocer más sobre otra empresa, lo haga
primeramente a través de Internet.
 La web corporativa puede estar orientada no
sólo a los CLIENTES, sino también a los
ACCIONISTAS, los EMPLEADOS y los MEDIOS
DE COMUNICACIÓN.

Ventajas y funciones de la
Web corporativa (1)
 Localización y conocimiento de la empresa
desde cualquier punto geográfico (promoción
global)

 Información actualizada a los clientes
(“ultimas novedades”) de una forma
inmediata, interactiva y a bajo coste

 Captura de información valiosa del mercado a
partir de las visitas realizadas

Ventajas y funciones de la
Web corporativa (2)
 Fidelización de los clientes mediante la
creación de “comunidades virtuales”

 Herramienta de comunicación de la
empresa con líderes de opinión como
los periodistas, expertos, etc.

 Prestación de servicios en tiempo real a
los clientes, las 24 hrs. del día

La web corporativa como fuente
de información para los medios
 El 96% de los periodistas busca en Internet
información sobre las empresas en Internet
(Estudio Inforpress-APIE sobre Salas de
Prensa digitales. www.noticiasdot.com)
 La web corporativa ya ha desplazado al
teléfono y al contacto personal como fuente
de información de prensa sobre las empresas.
 Esto revela la importancia de cuidar la
imagen de la empresa en el entorno digital,
manteniendo actualizada la web.

¿Qué opinan los profesionales de los
medios sobre las “salas de prensa
digitales”?

 Lo que más valoran: 1) actualización diaria, 2)
calidad de los documentos facilitados, 3) rapidez
de descarga, 4) Información en distintos idiomas.
 Lo que menos valoran: 1) el diseño de la web.
 Lo que más les irrita: 1) que no respondan los e-
mail, 2) no proporcionar ninguna dirección de e-
mail, ni teléfono de contacto.
Fuente: Estudio Inforpress-APIE sobre Salas de Prensa digitales. www.noticiasdot.com


REQUISITOS DE UNA WEB CON
ENFOQUE DE MARKETING (1)

 COHERENCIA ESTRATÉGICA: ¿Qué busco con
la web? ¿qué tipo de empresa quiero presentar?
¿a qué tipos de usuarios-target me voy a dirigir?
 DISEÑO AMIGABLE: Que tenga una buena
“usabilidad” (diseño amigable, cómodo para los
usuarios)
 CONTENIDOS ATRACTIVOS: Que los
contenidos capten la atención del usuario-target.
Que el usuario encuentre lo que busca.

REQUISITOS DE UNA WEB CON
ENFOQUE DE MARKETING (2)

 ACTUALIZACIÓN DE CONTENIDOS: Que los
contenidos se actualicen de forma sistemática, para
que los clientes confíen en la información publicada, y
regresen a menudo.
 BUEN POSICIONAMIENTO: Que esté bien
“posicionada” en los buscadores de Internet (por
ejemplo, Google), para que los potenciales clientes la
encuentren fácil.
 INTEGRACIÓN DE ACTUACIONES: Que se utilice
la URL o dirección-web en todas las actuaciones off-
line.

Tipos de web corporativas según
su diseño
 “Folleto electrónico” o “Esta-es-mi-
empresa” (el último vagón)

 “Catálogo-web” (el penúltimo vagón)

 “Web interactiva” (el segundo vagón)

 “Web personalizada” (el primer
vagón)

1) “Folleto electrónico” o “Esta-
es-mi-empresa”
 Sólo con información genérica de la
compañía, que explica lo buena,
eficiente y amable que es.

 Sin interactividad: mero traspaso de
información de folletos a la web

 Sin enfoque de marketing. Diseñadas
por personal técnico.

2) “Catalogo-web”

 Incluye información más detallada de
productos y servicios

 Posibilidad de adquirir productos
electrónicamente pero sin “transacción
segura”

 Sin interactividad. Información expuesta
de forma pasiva.

3) “Web interactiva”
 Diseño interactivo
 Posibilidad de transacciones de forma segura
 Extensa información sobre productos y servicios,
así como de la empresa
 Enfoque de marketing: 1) orientación hacia
determinados grupos de usuarios, 2) Ya no se
delega la web al personal técnico.
 Atrae a visitantes desde otros medios de
comunicación (prensa, radio, etc.)

4) “Web personalizada”
 Personalización: creación y mantenimiento de
bases de datos

 Oferta de servicios en tiempo real: “le sirvo lo
que quiere, y ahora”

 Comunicación totalmente interactiva

 Cadena de valor integrada electrónicamente


Ejemplos de personalización-web
 “Amazon” sabe los libros que usted ha
comprado, cuándo los ha comprado, qué
formato, qué medio de pago... y con esta
información le envía a usted e-mails con ofertas
 “Mi Yahoo” le envía las noticias que a usted le
interesan
 “Weather.com”: Usted pone sus datos y código
postal, y así cada vez que accede a su página,
se encuentra con el tiempo que va a hacer en
su localidad

Información (secciones mínimas) que
debe contener una web corporativa

 Misión: ¿a qué se dedica la empresa? ¿por qué
existe? (Más que una frase genial de un
creativo, o una combinación de palabras que
suenan bien, elige un “slogan” simple, corto,
claro e indudablemente beneficioso para el
cliente).
 Historia, antecedentes de la empresa.
 Datos básicos de la empresa: número de
empleados, facturación, redes de distribución,
etc. Amalio A. Rey - www.emotools.com


 Sala de Prensa: 1) Noticias publicadas sobre
la empresa, 2) Acceso para periodistas
 Mapas y direcciones de delegaciones y
tiendas
 Empleo: Noticias de ofertas de empleo y
posibilidad de e-recruitment
 Novedades: Sección que destaca la
información reciente

 Registro de usuarios: Formulario sencillo para que
los visitantes se identifiquen
 Testimonios y referencias: Comentarios positivos
de clientes hacia la empresa. Lista de clientes
destacados.
VER: http://www.pta.es/webmasterpta/index.html
 Catalogo de principales productos y servicios
 Lista de enlaces: Links de interés a otras web
relacionadas con el tipo de visitante


 FAQs: Preguntas más frecuentes sobre la
empresa y sus productos “estrella”.

 Mapa del sitio: Para facilitar la búsqueda de
contenidos específicos

 Buscador interno: Para sitios de +50 páginas.

 Documentos: informes, memorias y estudios
sobre la empresa o el sector, de interés para
la actividad a la que se dedica.

¿Quién debe tener el control de
los contenidos? (1)
 MARKETING defiende que tiene más
conocimiento del cliente. El DPTO TÉCNICO que
sólo él sabe cómo funciona una web.
 ¡¡¡Mi voto es por MARKETING!!! Esta gente tiene
una fotografía más amplia de la empresa y sus
clientes.
 El DPTO TÉCNICO entiende de los instrumentos
para hacer funcionar bien la web, pero
MARKETING es quien sabe cómo “hacerlos sonar”
con la música que desea oír el cliente.

¿Quién debe tener el control de
los contenidos? (2)

 Los DPTOS TÉCNICOS tienden a diseñar web
cargadas de animaciones y fotografías, con
textos de bajo valor añadido y mal
redactados. Tampoco saben promocionarlas
off-line para aumentar las visitas.

 En todo caso, en la “mezcla” está la riqueza:
equipos multidisciplinares PERO siendo
MARKETING quien diga la última palabra.

Responde bien a los e-mail: un hábito que
marca la diferencia (algunos datos)

 Las cartas de los clientes que llegan por
correo normal, pueden responderse en
una semana, incluso más, y resulta
aceptable.
 PERO, responder en una semana a un
e-mail da una imagen nefasta de la
empresa = ¡¡¡¡48 horas es el límite de
lo razonable!!!

Consejos prácticos para el
diseño de web corporativas:
75 recomendaciones

Objetivos al diseñar una web
 ATRAER visitantes por primera vez

 Llamar y MANTENER la atención sobre sus
contenidos (“web-stickyness”)

 Motivar la ACCIÓN de los visitantes (compra,
suscripción a newsletter, rellenar formularios,
encuestas, etc.)

 Hacer que los visitantes VUELVAN con
frecuencia

Errores más comunes: ¿Por qué
un usuario abandona una web?

 Problemas de funcionalidad (descarga
lenta de las páginas, navegación
confusa, enlaces mal definidos, etc.)
 Problemas de contenidos (no tiene la
información que se busca)
Los motivos “estéticos”, relacionados
con el diseño, pesan bastante menos.

Consejos para el diseño-web
Areas de aplicación
 Marketing y estrategia general
 Contenidos: relevancia, estructura y calidad
 Diseño gráfico y uso del multimedia
 Navegación y facilidad de uso
 Interactividad
 Manejo de los Textos: Redacción digital

Consejos: 1) Marketing y
Estrategia general

Marketing y estrategia general (1)
 Lo primero es planificar. Define cuál es el
objetivo de tu sitio y para qué lo necesitas:
¿para qué quieres tener una web corporativa?
¿Cuál es tu audiencia?
 Tu empresa no es el centro del universo,
compites con miles en atraer la atención del
visitante, que te abandona con un solo clic.
 No construyas tu web para le guste a los
ejecutivos de la empresa: ¡¡¡no son tu
público-objetivo!!!


 Sé HONESTO con el visitante. Proporciona
(desde el principio de la relación) TODA la
información que el cliente necesita para
tomar una decisión de compra.

 Saborea la SIMPLICIDAD, acostúmbrate a
disfrutarla y a buscarla por todos los medios y
(casi) a cualquier coste...

 Utiliza una dirección URL fácil de recordar.


 Olvida los contadores (públicos) de visitas, a
menos que tengas una web con un
muchísimo tráfico.
 Aporta elementos de confianza y seguridad
en las transacciones comerciales.
 Incluye, en la página principal, una foto de la
empresa con sus oficinas, da una sensación
de confianza, sugiere que hay una empresa
real detrás de la web.

HONRADEZ Y DILIGENCIA
La honradez funciona muy bien. Si no
conoces la respuesta a una pregunta que
te hagan, reconócelo sin tapujos pero
promete encontrarla lo antes posible;
luego sorprende al usuario cumpliendo lo
prometido


Consejos: 2) Contenidos:
relevancia, estructura y
organización

CONTENIDOS: Relevancia (1)
 ¿Quién es tu “audiencia”?
 ¿Que temas le interesa? ¿Que tipo de
información busca?
 Ofrecer un contenido relevante y de gran
calidad es tu prioridad número uno. Todo lo
demás es secundario.
 Siempre hay que pensar cómo aportar valor al
visitante. El objetivo de un sitio es ofrecer valor,
no deslumbrar por la tecnología o el diseño.

Evita los flash de portada.
No utilices presentaciones de entrada del
tipo “Ha llegado a la web site de...” o
“Bienvenido a la web....” con un ícono
que dice “entrar”.
Lo único que consigues con ello es hacer
perder tiempo a la gente, o que se
marchen antes de entrar.


 Actualiza tu web. Un sitio no actualizado solo
sirve para crear una mala imagen de la
empresa.
 Evita los enlaces “rotos”, que no conducen a
ningún sitio, con la ayuda de un programa para
detectarlos.
 Suprime los “mensajes del Presidente”, que a
nadie le importan... salvo al Presidente.
 Evita la contaminación publicitaria (banners,
pop-ups, etc.)

CONTENIDOS: Estructura y
organización
 Organiza la información según las necesidades y
expectativas de los potenciales usuarios, y no con
arreglo a la estructura interna de la empresa
 Lo importante primero: Tienes CINCO segundos
para persuadir al visitante de que no use el botón
“ATRÁS” del navegador. Lo más interesante debe
aparecer de inmediato, arriba del todo.
 Las empresas, con una importante masa
accionarial, deben contemplar una sección
específica de acceso para los accionistas

¿Cuánto espacio de pantalla
dedicas a los contenidos?
 Maximiza el espacio de pantalla dedicado a los
contenidos de interés para el usuario.
 Minimiza el espacio para: 1) Herramientas de
navegación del sitio, 2) Controles del sistema
operativo y del navegador, 3) Publicidad, 4)
Espacios en blanco = “Males necesarios” pero no
fines en sí mismos.
 Espacios en blanco: “Diseños claustrofóbicos”
 EJERCICIO: calcula proporción de pixels utilizados
para cada fin. Norma = Contenidos + 50%.

PERSONALIZACIÓN

“Cuanto mayores sean las diferencias
existentes entre los usuarios en cuanto a lo
que necesitan de tu web, y cuanto más
difícil resulte para un usuario especificar
esas necesidades, mayores beneficios
pueden obtenerse de la personalización”
DON PEPPERS y MARTHA ROGERS
Enterprise One to One


ENFOQUE MODULAR Y
PERSONALIZACIÓN

La personalización exige descomponer los
contenidos en pequeños trozos. Para ello
es fundamental pensar de forma
estructurada, y no caótica. Debemos ser
mucho más conscientes de la
ESTRUCTURA que cuando escribimos sobre
papel.


Estructura y “gestión de
párrafos”
 En la web los usuarios buscan afanosamente
pistas sobre el contenido de cada objeto
(párrafo) antes de decidirse a leerlo. Existe cierta
tendencia a suponer que cada nuevo párrafo
ofrecerá un tema distinto.
 Si dedicas cada párrafo a un propósito distinto (a
responder a una pregunta diferente), lo estas
encajando dentro de una estructura ordenada,
con una “etiqueta” clara para cada “objeto”.

PRIMERO LO PRIMERO: ¡¡EL
ORDEN SÍ IMPORTA!!
 Cuando estamos pensando, la conclusión va al
final. Pero si escribimos para la web, necesitamos
mover esa conclusión o resumen al principio.
 Un truco: Escribe el borrador como lo haces
normalmente, y cuando te enteres finalmente
qué es lo más importante que querías expresar,
entonces mueve esa párrafo o frase al principio.
 Crea una frase que resuma el tema del párrafo y
comienza por ella.
 Define una jerarquía de temas. La idea principal,
“el gancho” va primero, en el primer párrafo.

EJEMPLO DE MEJORA DE ESTRUCTURA
ANTES DESPUÉS
Puede sorprenderle saber que hay muchos Los perros necesitan su propio
tipos de champús elaborados champú, no el de sus dueños
especialmente para su perro. Sí, puede Su champú podría irritar la piel de su perro
hacer que el pelo de su mascota brille y dejar su pelaje apagado y rígido.
con un champú, eliminar pulgas y
¿Por qué? Para traspasar la grasa que se
garrapatas con otro, e hidratarlo con
forma en la superficie de su piel, los
otro. Pero todos estos champús tienen una
perros necesitan champús menos
cosa en común. No son tan fuertes como
ácidos que los seres humanos.
los champús humanos. ¿Por qué? La piel
de los perros tiene un pH distinto a la piel Los champús para perros tratan problemas
humana, de modo que necesitan champús distintos:
menos ácidos para traspasar las grasas  ¿Quiere hacer que el pelaje de su
que se acumulan en la superficie de su mascota brille? Use un champú
piel. Los champús humanos irritan la piel abrillantador.
de los perros y dejan su pelaje apagado y  ¿Quiere que su mascota huela bien?
rígido Use un champú aromático.
 ¿Quiere eliminar pulgas y garrapatas?
Use un champú antiparásitos.

¡¡DIFERÉNCIATE!!

Distingue, diferencia tus
ideas de las del rebaño.
La prosa sin rostro no
cautiva a nadie.

Versión para impresora o para
Guardar
La mayoría de los usuarios guardarán los
documentos largos en disco o los
imprimirán, en vez de leer material de gran
extensión on-line.
Si el documento es largo y está construido
como una secuencia lineal, su medio
natural es el papel.


Diseño de FAQs

Cada vez que un usuario haga
una pregunta (ya sea por e-
mail, teléfono, chat, foro o
carta) deberías considerar la
posibilidad de añadir la
respuesta a las FAQ

Diseño gráfico: la
funcionalidad primero
 La funcionalidad está siempre por encima del
diseño gráfico: MENOS GLAMOUR Y MAS
ORDEN.
 Al diseñador gráfico le gusta ganar concursos
de diseño (¿cómo puedo impresionar?) PERO
a la empresa vender más (¿cómo puedo
vender más?). Pero el más importante, el
cliente, lo que quiere es encontrar con
facilidad la información que necesita.


Diseño gráfico: simplicidad,
por favor
 Hazlo todo más simple. El poder de un buen
diseño esta en su simplicidad. No pares hasta
que te parezca demasiado simple...

 No hagas una web chillona. Evita colores de
texto, y fondos (por ejemplo, ¿negros?),
incómodos para la lectura. La página debe
ser limpia, despejada y fácil de leer.


Diseño gráfico: ¡¡¡mínimo
tiempo de descarga!!! (1)
 Es el factor más importante, con diferencia.
 La frontera, según estudios, es de 10
segundos = Límite para mantener la atención
de un usuario en espera, mientras se carga
una página.
 Mídelo en ordenadores estándar, no en los
que regularmente trabajas.
 Más Freehand y menos Photoshop.

Diseño gráfico: ¡¡¡mínimo
tiempo de descarga!!! (2)
 Optimiza las imágenes para reducir el
tamaño. Preferiblemente, no más de 15 kb.
Existen en el mercado programas que
reducen el peso de las imágenes para
adecuarlos a la web.

 Reutiliza las imágenes (ejemplo, para
botones, flechas, íconos, etc.) para acelerar
los tiempos de descarga. Además, mantener
un mismo “vocabulario visual” mejora la
consistencia del sitio.

Diseño gráfico: NO al “ruido
visual”
 Evita las páginas de inicio con portadas cargadas
de imágenes y llenas de pop-ups que aparecen
por todas partes.
 Nada de gráficos o fotos sin ninguna conexión
con los textos. Cada gráfico tiene que tener su
sentido, sino ahórratelo.
 Para los webmaster profesionales, las imágenes
animadas pueden ser lo más parecido a los virus
informáticos: entorpecen la lectura y recargan el
sistema. Amalio A. Rey - www.emotools.com

Diseño gráfico: Uso de
Multimedia (1)
 Reduce el uso de efectos Multimedia
sólo a las situaciones donde realmente
contribuyan a una mejor comprensión
de la información por parte del usuario.

 No cargues a la web de dibujos,
fotografías y animaciones que
distraigan al visitante y prolonguen el
tiempo de descarga.

Diseño gráfico: Uso de
Multimedia (2)
 Evita animaciones en constante
movimiento o parpadeantes. Utilízalas
sólo para:
 Llamar la atención sobre un elemento
puntual sobre los demás
 Destacar una información actualizada o
“nueva”
 Hacer la función de marcador, por ejemplo,
para indicar un punto dentro de un mapa.


Diseño gráfico: Integridad y
coherencia
 Integridad: el diseño debe ser similar en todas las
páginas: el menú siempre en el mismo lugar, el
logotipo igual, los mismos colores, etc. Evita las
“páginas huérfanas”.
 Todas las paginas deben mantener una coherencia
visual y contener elementos corporativos que la
hagan fácilmente reconocible.
 Aprovecha las llamadas Hojas de Estilo (CSS) para
manejar con soltura el estilo de todo el site de un
modo consistente.

Disposición de los contenidos en la
pantalla: ¿hacia dónde miran los usuarios?
Resultados de estudios del comportamiento por
“eye tracking”:
 Itinerario visual habitual: Centro-Izquierda-
Derecha.
 Zona central: esperan encontrar el contenido
principal
 En la izquierda: apoyo para desplazarse por el
sitio web (menús, etc.)
 En la derecha: Servicios e informaciones
complementarios.

Disposición de los contenidos en la
pantalla: ¿hacia dónde miran los usuarios?
 Parte superior: La anulan visualmente por ser
lugar típico para banners y anuncios. Solo la
miran si hay botones de acceso a funciones o
secciones.
 Parte inferior: Saben que habitualmente no
ofrece nada interesante.
 Anuncios publicitarios: Sólo miran con interés
aquellos que realmente le aporten algo a la
tarea que están realizando en ese momento.


Consejos: 4) Navegación y
facilidad de uso

¡¡NO ME HAGAS PENSAR!!
“Pensar es el trabajo más duro que existe”
(HENRY FORD). Por eso, “no me hagas
pensar” es la primera regla de Usabilidad
(STEVE KRUG)

“Si algo es complicado de utilizar,
simplemente no lo uso demasiado”

Navegación y facilidad de uso
 La diagramación de tu página es tan importante
como el contenido mismo. Hay que propiciar una
navegación cómoda e intuitiva.
 Respeta las convenciones y hábitos de navegación.
No hagas algo tan “original” que confunda a la
gente. (Ej. Diferentes colores para indicar los
hipervínculos).
 Evita los mensajes de error... previendo los errores
con un buen diseño. Ej. Si un error se repite,
entonces el sistema está mal diseñado.

Algunos principios de navegación
 La gente odia esperar

 La gente odia hacer scroll

 La gente odia leer

 La gente prefiere hacer scroll antes que esperar

 La gente prefiere esperar a leer


Facilidad de uso: ¿Qué está pasando?
¿Dónde estoy?

 Mantén informado al usuario de todo lo que
está sucediendo mientras navega en tu web.

Ej. Presentar mensajes de espera mientras
hace una transacción o de confirmación al
término de una operación.

 “Usted está en...”: Utiliza “breadcrumbs”
(“migas de pan”) u otro tipo de “directorio
dinámico”.


Facilidad de uso: Transfiere el control
al usuario (1)

 “Salidas de emergencia”: Transfiere el CONTROL
al usuario para que pueda saltarse un error o,
evitar páginas indeseadas.

Ej. Evita técnicas que restringen la libertad del
usuario:
 Ventanas que cubren toda la pantalla eliminando al
navegador
 Animaciones que no pueden ser “saltadas” (SKIP)
 Pop-ups que aparecen por todas partes.


Facilidad de uso: Transfiere el control
al usuario (2)

 Ayuda a los usuarios, si lo desean, a
regresar a la pagina principal desde
cualquier punto de la web.

 Ofrece múltiples vías para llegar a una
misma información. El camino que
puede ser obvio para el diseñador, en
ocasiones no lo es para el usuario.


Facilidad de uso: Categorización
intuitiva de los contenidos
 Coherencia, consistencia en los nombres de las
secciones, botones y contenidos de las mismas.
Enlaces reflejan el contenido al que apuntan.
Ej. Un enlace a “Ayuda” debe conducir a una página que
se llame así, y no “preguntas frecuentes”.

 Evita solapamientos y conflictos entre nombres de
secciones o botones del menú.
 Un menú claro ayuda a “captar” la estructura lógica
de una web, lo que hace al visitante sentirse más
cómodo.

Facilidad de uso: Menos clic para
llegar a los contenidos relevantes

 Distribución lógica de la información
(“Arquitectura de la Información”): Reducción del
número de clic para acceder a información
relevante (disminución del “tiempo muerto” de
descarga)
 La información relevante no debe estar a más de
3 clic. Evita que la disposición de las páginas
tenga una excesiva PROFUNDIDAD de
navegación.


Facilidad de uso: Compatibilidad
“hacia atrás” (1)

 Entiende la “compatibilidad hacia atrás”. Diseña
para la configuración estándar o más baja.

 La combinación de versiones de programas de
navegación, resolución y tamaño de los monitores,
plataformas y velocidades de acceso, puede
generar unas 10.000 distintas combinaciones de
ambientes para usar Internet. Por tanto, adáptate
al usuario estándar.


Facilidad de uso: Compatibilidad
“hacia atrás” (2)

No obligues a los usuarios a:

 Cargar plug-ins

 Cambiar la resolución del monitor

 Instalar una nueva versión del
navegador.


Facilidad de uso: Las ayudas a la
navegación

 Prevé “ayudas” contextuales (integrada
en el contenido mismo) para
operaciones complejas.

 Ofrece un “mapa de web” y un
“buscador” para acceder directamente a
determinado contenido sin necesidad de
navegar (sites grandes).


Facilidad de uso: ¿Quieres imprimir
un texto?

 Prevé un formato que permita la
impresión de páginas o cuando
publiques artículos de cierta extensión,
asegúrate de ofrecer la opción de
“versión para imprimir”.
Ej. Que el texto quepa en una página A4
estándar.


Uso de convenciones y
estándares
 SON MUY ÚTILES: Son convenciones
porque funcionan. Crean una agradable
sensación de familiaridad.
 NO SON BIEN VISTAS POR LOS
DISEÑADORES: Los diseñadores son
reacios a las convenciones. Se ven
tentados a reinventar la rueda porque
sienten que su función es crear cosas
nuevas.

¿Dónde se puede cliquear?
Es fundamental que en la web se deje claro
dónde se puede hacer clic. Si obligas al
usuario a pensar dónde puede pinchar
(algo que debería ser mecánico), estas
desaprovechando la escasa reserva de
paciencia y buena voluntad que tiene todo
usuario cuando visita un sitio nuevo
STEVE KRUG

Claridad de opciones: ¡¡no me
lies por favor!!
La primera pregunta clásica en el juego de palabras
“¿Animal, Vegetal o Mineral?” es un
magnífico ejemplo de elección mecánica y clara.
En tanto se acepte la premisa que todo lo que no
es planta o animal entra en la categoría de
“Mineral”, no es necesario ningún tipo de
esfuerzo mental para responder correctamente a
la pregunta. Desgraciadamente, la mayoría de las
opciones en la Web no están tan claras
STEVE KRUG

Usa enlaces, no hables de
ellos...
Asume los enlaces con normalidad. Pon la atención
en el tema principal, y no en los enlaces.
Expertos como el creador de Internet (Tim
Berners-Lee) detestan especialmente frases del
tipo: “haga clic aquí”, y recomienda a los
autores-web que: “cuando construyan su página
HTML, se aseguren que esa-cosa-sobre-la-que-
se-hace-clic sea en realidad algo parecido a un
título”


EJEMPLO

ANTES DESPUÉS
Haga clic aquí para acceder a la página Juan Gómez recopila la información más
Estadísticas de comercio electrónico, un reciente de los sondeos sobre el tema y la
listado con la información más reciente de publica en la página Estadísticas de
los sondeos en esta área comercio electrónico.
Aquí tenemos algunos enlaces El Servicio de Parques Nacionales describe
asombrosos que hemos descubierto sobre cada parque de su red, proporcionando
parques nacionales información de todo tipo en su Lista de
Parques.


Reduce los desplazamientos
de pantalla
 El desplazamiento excesivo puede desorientar a
los usuarios. Aún hoy muchos usuarios no se
molestan en desplazarse por debajo de la
presentación de la página. Por eso, LA PARTE
MÁS IMPORTANTE DE TU SITIO WEB ES LA
SECCIÓN SUPERIOR DE LA PÁGINA, LA QUE SE
VE AL ABRIRSE.
 Pero recuerda: LOS DESPLAZAMIENTOS SON
DESAGRADABLES... PERO PEOR ES TENER QUE
ESPERAR A UNA NUEVA DESCARGA...

Botón de “INICIO”
 Un requisito fundamental es prever un botón o
vínculo que lleve al usuario a la página principal
del sitio. Tener el botón HOME (“INICIO”) a la
vista siempre tranquiliza en caso de perderse. Así
siempre se puede volver a empezar.
 Está empezando a imponerse la convención de
que el logo o identificador del sitio también juega
la función de “INICIO” pero todavía muchos
usuarios no lo saben.

Interactividad: ¿Web muerta o viva?

 ¿Está tu web “viva” o es una web-folleto?

 ¿La web responde mal, o no responde, a las
acciones de los usuarios?.

 Ten en cuenta que la web te ofrece lo que
no consigue el mejor folleto del mundo:
interactividad.

Interactividad: Responde al usuario

 Prevé respuestas o avisos a las
interacciones que realice el usuario.
Ej. Informarle que la empresa ha
recibido satisfactoriamente un
formulario enviado.


Interactividad: Personalización
 Busca afanosamente una adecuada
personalización al usuario.

 Si hay que registrarse para acceder a alguna
información o servicio, la forma de hacerlo
debe ser la más simple posible.

El registro de un visitante debe ser no sólo
OPCIONAL, sino también INCENTIVADO. Haz
el mínimo de preguntas en el formulario.


Usabilidad y Arquitectura de
la Información

¿Qué es la “Usabilidad”?
 La cualidad que indica FACILIDAD DE USO
 En Internet = “ERGONOMÍA DIGITAL”
 Se ocupa de establecer patrones de navegación y
de diseñar procesos interactivos de forma eficiente
mejorando la interfaz de usuario.
 “Es como respirar; solo te das cuenta cuando te
falta. Hay un problema de usabilidad cuando algo
es difícil de utilizar y te gustaría que fuera más
intuitivo”
 ¡Diseño centrado en las necesidades del usuario!

¿Qué es “Arquitectura de la
Información” (AI)? (1)
Lo principal de una web es el CONTENIDO: La AI intenta
facilitar el acceso a ese contenido del modo más lógico e
intuitivo posible. Se encarga de:
 Concebir los contenidos que deben ir a un site
(“inventario de contenidos”)
 Agrupar esos contenidos en secciones de forma
lógica
 Diseñar la estructura que tendrán las páginas
(“árbol de navegación”)


¿Qué es “Arquitectura de la
Información” (AI)? (2)
 Definir los patrones y flujos de navegación
entre las páginas

 Diseñar los procesos de interactividad
presentes en el site

 Crear prototipos de la web, que consisten en
planos vivos de la futura web

 Cooperar en el concepto general del site con
los creativos y programadores

“Primera Ley de la Usabilidad”
Escucha y observa a tus usuarios. No lo
sabes todo de tu web
 Algo que puede parecer obvio para ti, puede que
no lo sea para los usuarios.
 Puedes creer que tu página es perfecta, pero la
realidad de tus usuarios ser muy diferente.
 Realiza tests de usabilidad. Aprende de tus
usuarios observándolos interactuar con tu web.
 Pregúntales en la web “cómo podemos mejorar
este sitio”.

Ejemplo de las “sorpresas” de los
tests de usabilidad
En un estudio de usabilidad realizado en una Web
de una compañía aérea norteamericana, se
descubrió que los usuarios tenían miedo de hacer
"clic" sobre un botón que decía: "Compre un billete
ahora". Los usuarios pensaban que pulsando ahí,
se verían obligados a comprar un billete, o que
automáticamente se le cargaría a su cuenta. Este
problema tan simple, provocó la pérdida de
muchas ventas a la compañía...


Ejemplo-1: Extensión de los Menús
No hagas menús muy extensos. Evita que tengan muchas
opciones = Más de 5 pueden ser muchas para leer,
entender y pinchar.
 Evita que el menú se pierda por debajo de la línea de scroll.
 ¿Mejor pocos botones con varios apartados que muchos
simples?
Ej. Agrupar las direcciones de las Delegaciones, la Memoria
Anual, la Historia de la Compañía y su Misión bajo un solo
botón: "Todo sobre Nosotros".
 Si existe la necesidad real de diseñar un menú complejo =
Utiliza el sistema de “directorio” desplegado, en el centro de
la página de inicio.

Ejemplo-2: Colores de los enlaces

 Los enlaces "nuevos" y "visitados" tener
el mismo color pero con diferentes
tonalidades.
 Es preferible NO utilizar diferentes
colores para cada estatus. En todo caso
= AZUL para las “no-visitadas” y
VIOLETA para las “visitadas”.

Amalio A. Rey – eMOTools.com ©

Ejemplo-3: ¿Dónde estoy?

Indica al usuario “donde estoy” sin
desactivar el botón correspondiente del
menú

 Es preferible subrayar el botón o insertar
algún elemento gráfico para resaltar la
diferencia.

 Si desactivas la opción, el usuario no podrá
volver a pincharla si se siente perdido.

Ejemplo-4: Menú desplegables y uso
de los bullets

Evita los menús desplegables pero si los usas,
al abrirlos, mantenlos desplegados
 No uses menús con rollover. No lo cierres de
forma automática.. Para el usuario es mas cómodo
si pincha para abrir y cerrar el menú.
 El uso de "bullets" en los menús es necesario sólo
cuando tenemos opciones que ocupan 2 o más
líneas de texto = Dejan claro donde empieza y
donde acaba cada opción.

¡¡MUCHAS GRACIAS!!
Si quieres seguir profundizando en este tema, te
invito a que visites estas web:
www.emotools.com
www.amaliorey.com

En TWITTER

Contenidos digitales para webs de empresas 75 consejos practicos e_mo_tools

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (17)

Similar a Contenidos digitales para webs de empresas 75 consejos practicos e_mo_tools

Similar a Contenidos digitales para webs de empresas 75 consejos practicos e_mo_tools (20)

Más de emotools

Más de emotools (20)

Último

Último (20)

Contenidos digitales para webs de empresas 75 consejos practicos e_mo_tools