Your SlideShare is downloading. ×
0
CONTENIDOS DIGITALESPARA WEB DE EMPRESAS:  75 consejos prácticos      Amalio A. Rey      www.emotools.com      www.amalior...
¿Te gustaría recibir e-mails             como estos? (1)   “ES TAN INTERESANTE QUE LA HE    RECOMENDADO A MIS COLABORADOR...
¿Te gustaría recibir e-mails             como estos? (2)   “TRAS LEER SU OPINIÓN, SOLO TUVE QUE    COMPRAR”   “SU TEXTO ...
¿Te gustaría recibir e-mails             como estos? (3)   “USTED SÍ QUE SABE DE LO QUE HABLA”   “ME HA AYUDADO A RESOVE...
¿Te gustaría recibir e-mails             como estos? (4)   “ERA ESTO PRECISAMENTE LO QUE    NECESITABA”   “ME HE SENTIDO...
OBJETIVOS   Analizar los errores típicos que cometen las    empresas en el diseño de sus web corporativas.   Comentar lo...
OBJETIVOS   Presentar distintas herramientas para mejorar el    diseño de las web corporativas, en particular,    recomen...
ADVERTENCIA:            enfoque de la ponencia   LO QUE NO ES: Esta NO es una ponencia    estrictamente orientada a infor...
Introducción¿Contenidos Digitales?
¿Qué son los “contenidos                 digitales”? Acepción maximalista: El Diseño, la Programación y los  (Hiper)texto...
¿Qué hace singular a los              “contenidos digitales”?   Un soporte donde el poder está TOTALMENTE en    manos de ...
Ideas clave (1)   En comunicación digital, lo SIMPLE y BREVE,    dos veces bueno.   Las PALABRAS (los textos) tienen pri...
Ideas clave (2)   Escribir para la web es diferente. Evita un “copy-paste”    del folleto de la empresa.   El lenguaje d...
La web corporativacomo herramienta de     marketing
La web corporativa como         herramienta de marketing   La web corporativa refleja la imagen, filosofía,    productos ...
Ventajas y funciones de la     Web corporativa (1)   Localización y conocimiento de la empresa    desde cualquier punto g...
Ventajas y funciones de la    Web corporativa (2)   Fidelización de los clientes mediante la    creación de “comunidades ...
La web corporativa como fuente     de información para los medios   El 96% de los periodistas busca en Internet    inform...
¿Qué opinan los profesionales de los              medios sobre las “salas de prensa                         digitales”?  ...
REQUISITOS DE UNA WEB CON            ENFOQUE DE MARKETING (1)   COHERENCIA ESTRATÉGICA: ¿Qué busco con    la web? ¿qué ti...
REQUISITOS DE UNA WEB CON             ENFOQUE DE MARKETING (2)   ACTUALIZACIÓN DE CONTENIDOS: Que los    contenidos se ac...
Tipos de web corporativas según               su diseño   “Folleto electrónico” o “Esta-es-mi-    empresa” (el último vag...
1) “Folleto electrónico” o “Esta-              es-mi-empresa”   Sólo con información genérica de la    compañía, que expl...
2) “Catalogo-web”   Incluye información más detallada de    productos y servicios   Posibilidad de adquirir productos   ...
3) “Web interactiva”   Diseño interactivo   Posibilidad de transacciones de forma segura   Extensa información sobre pr...
4) “Web personalizada”   Personalización: creación y mantenimiento de    bases de datos   Oferta de servicios en tiempo ...
Ejemplos de personalización-web   “Amazon” sabe los libros que usted ha    comprado, cuándo los ha comprado, qué    forma...
Información (secciones mínimas) que      debe contener una web corporativa   Misión: ¿a qué se dedica la empresa? ¿por qu...
Información (secciones mínimas) que    debe contener una web corporativa   Sala de Prensa: 1) Noticias publicadas sobre  ...
Información (secciones mínimas) que       debe contener una web corporativa   Registro de usuarios: Formulario sencillo p...
Información (secciones mínimas) que    debe contener una web corporativa   FAQs: Preguntas más frecuentes sobre la    emp...
¿Quién debe tener el control de      los contenidos? (1)   MARKETING defiende que tiene más    conocimiento del cliente. ...
¿Quién debe tener el control de    los contenidos? (2)   Los DPTOS TÉCNICOS tienden a diseñar web    cargadas de animacio...
Responde bien a los e-mail: un hábito que        marca la diferencia (algunos datos)   Las cartas de los clientes que lle...
Consejos prácticos para eldiseñ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...
Errores más comunes: ¿Por qué     un usuario abandona una web?   Problemas de funcionalidad (descarga    lenta de las pág...
Consejos para el diseño-web             Areas de aplicación   Marketing y estrategia general   Contenidos: relevancia, e...
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 ne...
Marketing y estrategia general (2)   Sé HONESTO con el visitante. Proporciona    (desde el principio de la relación) TODA...
Marketing y estrategia general (3)   Olvida los contadores (públicos) de visitas, a    menos que tengas una web con un   ...
HONRADEZ Y DILIGENCIA La honradez funciona muy bien. Si noconoces la respuesta a una pregunta que  te hagan, reconócelo si...
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?   O...
CONTENIDOS: Relevancia (2)      Evita los flash de portada.No utilices presentaciones de entrada del  tipo “Ha llegado a l...
CONTENIDOS: Relevancia (3)   Actualiza tu web. Un sitio no actualizado solo    sirve para crear una mala imagen de la    ...
CONTENIDOS: Estructura y      organización   Organiza la información según las necesidades y    expectativas de los poten...
¿Cuánto espacio de pantalla          dedicas a los contenidos?   Maximiza el espacio de pantalla dedicado a los    conten...
PERSONALIZACIÓN“Cuanto mayores sean las diferencias existentes entre los usuarios en cuanto a lo que necesitan de tu web, ...
ENFOQUE MODULAR Y          PERSONALIZACIÓNLa personalización exige descomponer los contenidos en pequeños trozos. Para ell...
Estructura y “gestión de                   párrafos”   En la web los usuarios buscan afanosamente    pistas sobre el cont...
PRIMERO LO PRIMERO: ¡¡EL             ORDEN SÍ IMPORTA!!   Cuando estamos pensando, la conclusión va al    final. Pero si ...
EJEMPLO DE MEJORA DE ESTRUCTURA                  ANTES                                        DESPUÉSPuede sorprenderle sa...
¡¡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 dis...
Diseño de FAQsCada vez que un usuario haga una pregunta (ya sea por e-  mail, teléfono, chat, foro o carta) deberías consi...
Consejos: 3) Diseño Gráfico
Diseño gráfico: la           funcionalidad primero   La funcionalidad está siempre por encima del    diseño gráfico: MENO...
Diseño gráfico: simplicidad,                por favor   Hazlo todo más simple. El poder de un buen    diseño esta en su s...
Diseño gráfico: ¡¡¡mínimo        tiempo de descarga!!! (1)   Es el factor más importante, con diferencia.   La frontera,...
Diseño gráfico: ¡¡¡mínimo        tiempo de descarga!!! (2)   Optimiza las imágenes para reducir el    tamaño. Preferiblem...
Diseño gráfico: NO al “ruido                   visual”   Evita las páginas de inicio con portadas cargadas    de imágenes...
Diseño gráfico: Uso de             Multimedia (1)   Reduce el uso de efectos Multimedia    sólo a las situaciones donde r...
Diseño gráfico: Uso de               Multimedia (2)   Evita animaciones en constante    movimiento o parpadeantes. Utilíz...
Diseño gráfico: Integridad y                coherencia   Integridad: el diseño debe ser similar en todas las    páginas: ...
Disposición de los contenidos en la      pantalla: ¿hacia dónde miran los usuarios?    Resultados de estudios del comporta...
Disposición de los contenidos en la    pantalla: ¿hacia dónde miran los usuarios?   Parte superior: La anulan visualmente...
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 prim...
Navegación y facilidad de uso   La diagramación de tu página es tan importante    como el contenido mismo. Hay que propic...
Algunos principios de navegación   La gente odia esperar   La gente odia hacer scroll   La gente odia leer   La gente ...
Facilidad de uso: ¿Qué está pasando?                ¿Dónde estoy?   Mantén informado al usuario de todo lo que    está su...
Facilidad de uso: Transfiere el control                    al usuario (1)   “Salidas de emergencia”: Transfiere el CONTRO...
Facilidad de uso: Transfiere el control                al usuario (2)   Ayuda a los usuarios, si lo desean, a    regresar...
Facilidad de uso: Categorización             intuitiva de los contenidos   Coherencia, consistencia en los nombres de las...
Facilidad de uso: Menos clic para         llegar a los contenidos relevantes   Distribución lógica de la información    (...
Facilidad de uso: Compatibilidad                   “hacia atrás” (1)   Entiende la “compatibilidad hacia atrás”. Diseña  ...
Facilidad de uso: Compatibilidad                “hacia atrás” (2)No obligues a los usuarios a:   Cargar plug-ins   Cambi...
Facilidad de uso: Las ayudas a la                  navegación   Prevé “ayudas” contextuales (integrada    en el contenido...
Facilidad de uso: ¿Quieres imprimir                    un texto?   Prevé un formato que permita la    impresión de página...
Uso de convenciones y                estándares   SON MUY ÚTILES: Son convenciones    porque funcionan. Crean una agradab...
¿Dónde se puede cliquear?Es fundamental que en la web se deje claro   dónde se puede hacer clic. Si obligas al    usuario ...
Claridad de opciones: ¡¡no me             lies por favor!!La primera pregunta clásica en el juego de palabras        “¿Ani...
Usa enlaces, no hables de                 ellos...Asume los enlaces con normalidad. Pon la atención      en el tema princi...
EJEMPLO                 ANTES                                       DESPUÉSHaga clic aquí para acceder a la página      Ju...
Reduce los desplazamientos                de pantalla   El desplazamiento excesivo puede desorientar a    los usuarios. A...
Botón de “INICIO”   Un requisito fundamental es prever un botón o    vínculo que lleve al usuario a la página principal  ...
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...
Interactividad: Responde al usuario   Prevé respuestas o avisos a las    interacciones que realice el usuario.    Ej. Inf...
Interactividad: Personalización   Busca afanosamente una adecuada    personalización al usuario.   Si hay que registrars...
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 es...
¿Qué es “Arquitectura de la                Información” (AI)? (1)    Lo principal de una web es el CONTENIDO: La AI intent...
¿Qué es “Arquitectura de la            Información” (AI)? (2)   Definir los patrones y flujos de navegación    entre las ...
“Primera Ley de la Usabilidad”      Escucha y observa a tus usuarios. No lo              sabes todo de tu web   Algo que ...
Ejemplo de las “sorpresas” de los            tests de usabilidadEn un estudio de usabilidad realizado en una Webde una com...
Ejemplo-1: Extensión de los Menús    No hagas menús muy extensos. Evita que tengan muchas    opciones = Más de 5 pueden se...
Ejemplo-2: Colores de los enlaces   Los enlaces "nuevos" y "visitados" tener    el mismo color pero con diferentes    ton...
Ejemplo-3: ¿Dónde estoy?      Indica al usuario “donde estoy” sin    desactivar el botón correspondiente del              ...
Ejemplo-4: Menú desplegables y uso                  de los bulletsEvita los menús desplegables pero si los usas,       al ...
¡¡MUCHAS GRACIAS!!Si quieres seguir profundizando en este tema, te          invito a que visites estas web:             ww...
Upcoming SlideShare
Loading in...5
×

Contenidos digitales para webs de empresas 75 consejos practicos e_mo_tools

1,256

Published on

Published in: Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,256
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
40
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Contenidos digitales para webs de empresas 75 consejos practicos e_mo_tools"

  1. 1. CONTENIDOS DIGITALESPARA WEB DE EMPRESAS: 75 consejos prácticos Amalio A. Rey www.emotools.com www.amaliorey.com
  2. 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. 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. 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. 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. 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. 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. 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. 9. Introducción¿Contenidos Digitales?
  10. 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. 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. 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. 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. 14. La web corporativacomo herramienta de marketing
  15. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 35. Consejos prácticos para eldiseño de web corporativas: 75 recomendaciones
  36. 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. 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. 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. 39. Consejos: 1) Marketing y Estrategia general
  40. 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. 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. 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. 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. 44. Consejos: 2) Contenidos: relevancia, estructura y organización
  45. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 58. Consejos: 3) Diseño Gráfico
  59. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 69. Consejos: 4) Navegación y facilidad de uso
  70. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 89. Consejos: 5) Interactividad
  90. 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. 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. 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. 93. Usabilidad y Arquitectura de la Información
  94. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×