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

http://www.emotools.com/

http://www.amaliorey.com/

Amalio A. Rey - www.emotools.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”


“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”


“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”



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


http://www.noticiasdot.com/

¿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


http://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.



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


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


http://www.pta.es/webmasterpta/index.html


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.


ANTES DESPUÉS

Puede sorprenderle saber que hay muchos tipos de champús elaborados

especialmente para su perro. Sí, puede hacer que el pelo de su mascota brille con un champú, eliminar pulgas y

garrapatas con otro, e hidratarlo con otro. Pero todos estos champús tienen una cosa en común. No son tan fuertes como

los champús humanos. ¿Por qué? La piel de los perros tiene un pH distinto a la piel humana, de modo que necesitan champús

menos ácidos para traspasar las grasas que se acumulan en la superficie de su piel. Los champús humanos irritan la piel

de los perros y dejan su pelaje apagado y rígido

Los perros necesitan su propio champú, no el de sus dueños

Su champú podría irritar la piel de su perro y dejar su pelaje apagado y rígido.

¿Por qué? Para traspasar la grasa que se

forma en la superficie de su piel, los perros necesitan champús menos ácidos que los seres humanos.

Los champús para perros tratan problemas distintos:

¿Quiere hacer que el pelaje de su

mascota brille? Use un champú abrillantador.

¿Quiere que su mascota huela bien? Use un champú aromático.

¿Quiere eliminar pulgas y garrapatas? Use un champú antiparásitos.

EJEMPLO DE MEJORA DE ESTRUCTURA

¡¡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


Consejos: 3) Diseño Gráfico

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.


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 Estadísticas de comercio electrónico, un

listado con la información más reciente de los sondeos en esta área

Juan Gómez recopila la información más reciente de los sondeos sobre el tema y la

publica en la página Estadísticas de comercio electrónico.

Aquí tenemos algunos enlaces

asombrosos que hemos descubierto sobre parques nacionales

El Servicio de Parques Nacionales describe

cada parque de su red, proporcionando 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.


Consejos: 5) Interactividad

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! Amalio A. Rey - www.emotools.com

¿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. Amalio A. Rey - www.emotools.com

Amalio A. Rey – eMOTools.com ©

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

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

http://www.emotools.com/

http://www.amaliorey.com/

contenidos digitales para webs de empresas 75 consejos practicos e_mo_tools

Business