Contenidos digitales para webs de empresas 75 consejos practicos e_mo_tools

  • 1,161 views
Uploaded on

 

More in: Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,161
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
36
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. CONTENIDOS DIGITALESPARA WEB DE EMPRESAS: 75 consejos prácticos Amalio A. Rey www.emotools.com www.amaliorey.com
  • 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
  • 9. Introducción¿Contenidos Digitales?
  • 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
  • 14. La web corporativacomo herramienta de marketing
  • 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
  • 35. Consejos prácticos para eldiseño de web corporativas: 75 recomendaciones
  • 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
  • 39. Consejos: 1) Marketing y Estrategia general
  • 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 noconoces 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
  • 44. Consejos: 2) Contenidos: relevancia, estructura y organización
  • 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ÓNLa 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 laESTRUCTURA 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ÉSPuede sorprenderle saber que hay muchos Los perros necesitan su propiotipos de champús elaborados champú, no el de sus dueñosespecialmente para su perro. Sí, puede Su champú podría irritar la piel de su perrohacer 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 segarrapatas con otro, e hidratarlo con forma en la superficie de su piel, losotro. Pero todos estos champús tienen una perros necesitan champús menoscosa en común. No son tan fuertes como ácidos que los seres humanos.los champús humanos. ¿Por qué? La pielde los perros tiene un pH distinto a la piel Los champús para perros tratan problemashumana, de modo que necesitan champús distintos:menos ácidos para traspasar las grasas  ¿Quiere hacer que el pelaje de suque 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.
  • 55. ¡¡DIFERÉNCIATE!!Distingue, diferencia tus ideas de las del rebaño. La prosa sin rostro no cautiva a nadie. Amalio A. Rey - www.emotools.com
  • 56. Versión para impresora o para Guardar La mayoría de los usuarios guardarán los documentos largos en disco o losimprimirá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 FAQsCada 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
  • 58. Consejos: 3) Diseño Gráfico
  • 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
  • 69. Consejos: 4) Navegación y facilidad de uso
  • 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ÉSHaga clic aquí para acceder a la página Juan Gómez recopila la información másEstadísticas de comercio electrónico, un reciente de los sondeos sobre el tema y lalistado con la información más reciente de publica en la página Estadísticas delos sondeos en esta área comercio electrónico.Aquí tenemos algunos enlaces El Servicio de Parques Nacionales describeasombrosos que hemos descubierto sobre cada parque de su red, proporcionandoparques 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
  • 89. Consejos: 5) Interactividad
  • 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
  • 93. Usabilidad y Arquitectura de la Información
  • 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 usabilidadEn un estudio de usabilidad realizado en una Webde una compañía aérea norteamericana, sedescubrió que los usuarios tenían miedo de hacer"clic" sobre un botón que decía: "Compre un billeteahora". Los usuarios pensaban que pulsando ahí,se verían obligados a comprar un billete, o queautomáticamente se le cargaría a su cuenta. Esteproblema tan simple, provocó la pérdida demuchas 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
  • 100. 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 ©
  • 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 bulletsEvita 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