2. ¿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
3. ¿Te gustaría recibir e-mails
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”
Amalio A. Rey - www.emotools.com
4. ¿Te gustaría recibir e-mails
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”
Amalio A. Rey - www.emotools.com
5. ¿Te gustaría recibir e-mails
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”
Amalio A. Rey - www.emotools.com
6. 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.
Amalio A. Rey - www.emotools.com
7. 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”)
Amalio A. Rey - www.emotools.com
8. 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.
Amalio A. Rey - www.emotools.com
10. ¿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.
Amalio A. Rey - www.emotools.com
11. ¿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!!
Amalio A. Rey - www.emotools.com
12. 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.
Amalio A. Rey - www.emotools.com
13. 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
Amalio A. Rey - www.emotools.com
15. 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.
Amalio A. Rey - www.emotools.com
16. 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
Amalio A. Rey - www.emotools.com
17. 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
Amalio A. Rey - www.emotools.com
18. 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.
Amalio A. Rey - www.emotools.com
19. ¿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
Amalio A. Rey - www.emotools.com
20. 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.
Amalio A. Rey - www.emotools.com
21. 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.
Amalio A. Rey - www.emotools.com
22. 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)
Amalio A. Rey - www.emotools.com
23. 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.
Amalio A. Rey - www.emotools.com
24. 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.
Amalio A. Rey - www.emotools.com
25. 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.)
Amalio A. Rey - www.emotools.com
26. 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
Amalio A. Rey - www.emotools.com
27. 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
Amalio A. Rey - www.emotools.com
28. 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
29. Información (secciones mínimas) que
debe contener una web corporativa
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
Amalio A. Rey - www.emotools.com
30. Información (secciones mínimas) que
debe contener una web corporativa
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
Amalio A. Rey - www.emotools.com
31. Información (secciones mínimas) que
debe contener una web corporativa
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.
Amalio A. Rey - www.emotools.com
32. ¿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.
Amalio A. Rey - www.emotools.com
33. ¿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.
Amalio A. Rey - www.emotools.com
34. 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!!!
Amalio A. Rey - www.emotools.com
36. 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
Amalio A. Rey - www.emotools.com
37. 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.
Amalio A. Rey - www.emotools.com
38. 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
Amalio A. Rey - www.emotools.com
40. 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!!!
Amalio A. Rey - www.emotools.com
41. Marketing y estrategia general (2)
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.
Amalio A. Rey - www.emotools.com
42. Marketing y estrategia general (3)
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.
Amalio A. Rey - www.emotools.com
43. 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
Amalio A. Rey - www.emotools.com
45. 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.
Amalio A. Rey - www.emotools.com
46. CONTENIDOS: Relevancia (2)
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.
Amalio A. Rey - www.emotools.com
47. CONTENIDOS: Relevancia (3)
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.)
Amalio A. Rey - www.emotools.com
48. 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
Amalio A. Rey - www.emotools.com
49. ¿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%.
Amalio A. Rey - www.emotools.com
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
Amalio A. Rey - www.emotools.com
51. 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.
Amalio A. Rey - www.emotools.com
52. 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”.
Amalio A. Rey - www.emotools.com
53. 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.
Amalio A. Rey - www.emotools.com
54. 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.
56. 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.
Amalio A. Rey - www.emotools.com
57. 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
Amalio A. Rey - www.emotools.com
59. 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.
Amalio A. Rey - www.emotools.com
60. 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.
Amalio A. Rey - www.emotools.com
61. 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.
Amalio A. Rey - www.emotools.com
62. 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.
Amalio A. Rey - www.emotools.com
63. 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
64. 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.
Amalio A. Rey - www.emotools.com
65. 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.
Amalio A. Rey - www.emotools.com
66. 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.
Amalio A. Rey - www.emotools.com
67. 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.
Amalio A. Rey - www.emotools.com
68. 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.
Amalio A. Rey - www.emotools.com
70. ¡¡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”
Amalio A. Rey - www.emotools.com
71. 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.
Amalio A. Rey - www.emotools.com
72. 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
Amalio A. Rey - www.emotools.com
73. 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”.
Amalio A. Rey - www.emotools.com
74. 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.
Amalio A. Rey - www.emotools.com
75. 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.
Amalio A. Rey - www.emotools.com
76. 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.
Amalio A. Rey - www.emotools.com
77. 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.
Amalio A. Rey - www.emotools.com
78. 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.
Amalio A. Rey - www.emotools.com
79. 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.
Amalio A. Rey - www.emotools.com
80. 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).
Amalio A. Rey - www.emotools.com
81. 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.
Amalio A. Rey - www.emotools.com
82. 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.
Amalio A. Rey - www.emotools.com
83. ¿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
Amalio A. Rey - www.emotools.com
84. 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
Amalio A. Rey - www.emotools.com
85. 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”
Amalio A. Rey - www.emotools.com
86. 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.
Amalio A. Rey - www.emotools.com
87. 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...
Amalio A. Rey - www.emotools.com
88. 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.
Amalio A. Rey - www.emotools.com
90. 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.
Amalio A. Rey - www.emotools.com
91. 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.
Amalio A. Rey - www.emotools.com
92. 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.
Amalio A. Rey - www.emotools.com
94. ¿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!
Amalio A. Rey - www.emotools.com
95. ¿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”)
Amalio A. Rey - www.emotools.com
96. ¿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
Amalio A. Rey - www.emotools.com
97. “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”.
98. 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...
Amalio A. Rey - www.emotools.com
99. 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.
Amalio A. Rey - www.emotools.com
101. 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.
Amalio A. Rey - www.emotools.com
102. 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.
Amalio A. Rey - www.emotools.com
103. ¡¡MUCHAS GRACIAS!!
Si quieres seguir profundizando en este tema, te
invito a que visites estas web:
www.emotools.com
www.amaliorey.com
En TWITTER