GESTIÓN DE CONTENIDOS EN INTERNET<br />Miguel Arias<br /> #labtalleres<br />
¿Qué queremos hacer en Internet?<br />¿Cómo atraemos a los usuarios?<br />Mensajes publicitarios<br />Persuasión<br />Cont...
¿Qué queremos hacer en Internet?Posicionamiento online<br />
¿Qué queremos hacer en Internet?<br />Investigación<br />Empresa<br />¿Para qué Internet?<br />Clientes<br />¿Qué quieren ...
¿Para qué Internet?<br />Objetivos generales de la empresa<br />Valor añadido a ofrecer<br />Vender 24 horas / 365 días<br...
Definir la audiencia potencial<br />Perfil de usuarios: edad, educación, trabajo, experiencia con Internet, actividades so...
Métricas: CPM, CTR, Leads, Fidelización<br />7<br />
8<br />Embudo del ciclo de vida del cliente<br />
¿Cómo atraemos a los usuarios?Captación de visitas<br />
Atención: recurso más escaso<br />10<br />
Economía de la atención<br />“Permission marketing” (SethGodin, 1999): El tiempo es el único recurso realmente escaso<br /...
                <br />¿Cómo se encuentra un sitio web?<br />Fuente: Tendencias digitales<br />
13<br />Nombre del dominio web<br />El dominio es la marca en Internet<br />Selección compleja e importante<br />Requisito...
Nombre del dominio web<br />
SEO (Optimización para buscadores)<br /><ul><li> Web accesible: limitar contenido en Flash, frames ...
Títulos únicos y buenas descripciones del contenido de cada página.
 Crear contenidos con textos que contienen palabras clave que buscan los usuarios.
 Conseguir enlaces (¡sin pagar!) de otras webs de temática similar.</li></li></ul><li>Contenidos para SEO<br />
Funcionamiento de Google<br />Publicidad autogestionada<br />Contenido relevante<br />
Publicidad online: Google Ad Words<br />
Google Places: hay que estar<br />Google Places<br />
Social Media vs Mass media<br />20<br /><ul><li>Contenido generado por los usuarios
 Acceso gratuito
 Facilidad para crear y editar contenidos
 Instantaneidad en la producción de contenido
 Audiencia global
Viralidad</li></li></ul><li>Herramientas para compartir crecen exponencialmente<br /><ul><li>Facebook: 800 millones de usu...
Twitter: 200 millones de usuarios
Linkedin
 Google +
YouTube
Slideshare
 Y las que no triunfaron: Hi5, Friendster, MySpace, </li></ul>SecondLife,…<br />21<br />
Presencia en Facebook<br />¿Página, perfil o grupo?<br />Página tiene orientación empresa <br /><ul><li>Sin límite de cont...
Visible sin login
Fans no requieren confirmación</li></ul>http://www.facebook.com/pages/create.php<br />
Algunos consejos para Facebook<br /><ul><li>Voz personal
Fotos y rostros
Respuesta emocional (target)
Inicia debate
 Horario fuera de oficina
 Evitar demasiados mensajes en un solo día.
 Los sábados y domingos buenos días para publicación.</li></ul>Fuente: Hootsuite / Mashable<br />
Presencia en Twitter<br />
Presencia en Linkedin<br />
Mensajes publicitarios online<br />
¿Qué funciona? Observar Google<br />Guía editorial de Google AdWords<br />La publicidad más eficaz comunica un mensaje cla...
Métrica de Google Ads<br />OPV de FadesaInversores particulares opinan sobre la OPV de Fadesawww.rankia.com Interés:   2.3...
Ceguera cognitiva a los banners<br />Captar la atención: se utilizamovimiento, contrastes, coloresfuertes....<br />Esquema...
Ceguera cognitiva a los banners<br />
La percepción<br />Varía según los estímulos del contexto:<br />Volumen de información que le rodea<br />Color de fondo<br...
La percepción según el contexto<br />¿Dos caras?<br />¿Una copa?<br />32<br />
¿Qué circulo central es mayor?<br />Dependiendo de los elementos que le rodean el círculo central se percibe mayor o menor...
Persuasión<br />
La importancia de la experiencia del usuario y la usabilidad<br />
¿Ofrecer una buena experiencia online?<br /><ul><li>Condición necesaria: regla AFUFU
¿Accesible?  Normativa W3C (1999)
¿Funciona?  Servidores, conexión a Internet
¿Fácil de Usar?  Análisis de usabilidad</li></ul>Una tecnología invisible es una tecnología madura<br /><ul><li>... Pero n...
Accesibilidad a los contenidos<br />9% de la población española (3,5 M.) sufre alguna discapacidad física o cognitiva.<br ...
No sólo las personas discapacitadas tienen problemas de accesibilidad...<br />Personas mayores (problemas de visualización...
Recomendaciones de accesibilidad<br />Todo el texto se debe ofrecer como texto (no como imagen).<br />Poder aumentar el ta...
Validadores de accesibilidad: TAW<br />TAW http://www.tawdis.net/<br />Ver el contenido de la página desde un navegador só...
Facilitar accesibilidad<br />
Funcionalidad del sitio web<br />Fallos del servidor (tests de carga emulando horas punta)<br />Velocidad de descarga de l...
¿Qué es la usabilidad?<br />Medida de la facilidad que tiene un usuario para conseguir sus objetivos al navegar por unaweb...
Lo más importante es pensar en el usuario<br />Premisa nº 1 de Google:<br />La interfaz clara y sencilla<br />Las páginas ...
Diseño centrado en los usuarios<br />45<br />
5-8 usuarios por tipo de audiencia es suficiente<br />
Definir la audiencia<br />Perfil socio-demográfico de los usuarios: <br />Edad<br />Sexo<br />Experiencia navegando por la...
Página de inicio<br />
Objetivos de la página de inicio<br />Descarga rápida (max. 10 segundos) y Accesibilidad<br />Priorizar lo más importante,...
Velocidad de descarga de la página<br /><ul><li>Prioridad para los usuarios
Incluir sóloimágenes que ayuden a comprender la información
Optimización y reutilización de imágenes
No usar frames ni Flash no solicitado: ralentiza la descarga</li></li></ul><li>Propuesta de valor clara desde inicio<br />...
Propuesta de valor clara<br />Comunicar de manera clara y efectiva las ventajas<br />
Menos es más: Aprender a priorizar<br />
La importancia del layout<br />Tipografía clara<br />Jerarquía visual<br />Uso de espacios en blanco<br />Color azul: segu...
Colores
Iconografía
Líneas
Recuadrados y fondos de color</li></li></ul><li>Dirigir la atención del usuario<br />La imagen de una persona atrae la ate...
Navegación y visibilidad del estado del sistema<br />
Diseño centrado en los usuarios<br />“No me hagas pensar” (Steve Krug)<br />“No me hagas perder tiempo”<br />Simplicidad: ...
Tres preguntas clave en una página<br /><ul><li>¿Dónde puedo ir desde aquí?
Enlaces hipertextuales estándar (subrayados y en azul)
Barra de navegación global y local
Barra de utilidades (mapa del sitio, inicio, contactar, etc.)
¿Dónde estoy?
En relación a la WWW como todo (logotipo)
En relación a la estructura del sitio (señalar visualmente en la barra de navegación global y local o en la ruta de navega...
¿Dónde he estado?
Colores de enlace estándares (morado = enlace visitado)</li></li></ul><li>¿Por qué seguir las convenciones?<br />“La red e...
No obligar a pensar<br />
¿Seguimos los estándares?<br />Con independencia del idioma el usuario debe comprender la estructura de navegación<br />
Tu web es una pequeña parte en la <br />experiencia de tus usuarios<br />…especialmente en procesos de búsqueda<br />Ej./ ...
¿Cómo encontrar un producto?<br />Dos formas básicas:<br />Navegar por categorías (Browsing): <br />Opciones en el menú de...
Denominación de opciones y productos<br />El Arte de titular bien: es complejo y necesita feed-back de los usuarios<br />C...
Redacción y presentación de productos y servicios<br />
Presentación de contenidos online<br />1. Estructurar para una consulta rápida (ojear)<br />2. Lo mas importante al princi...
67<br />Título de página<br />Cada página debe tener un título diferente<br />Título tiene dos funciones:- indicar en qué ...
Ofrecer consistencia en todo el sitio<br />Coherencia en la composición, localización y utilización de colores <br />Confi...
Fuentes<br />Fuente por defecto en el Sistema operativo<br />Sin serifa (Arial, Verdana, Tahoma, etc.)<br />Tamaño en valo...
Facilitar la lectura en diagonal<br />Viñetas<br />Negritas: anclajes visuales<br />Hipertexto<br />Una idea por párrafo<b...
Evitar mayúsculas en contenidos<br />Discontinuidad fuentes facilita la lectura<br />
Imágenes que aporten información<br />
Malapresentación de contenidos online<br />Título no descriptivo, en mayúsculas y subrayado<br />No hay viñetas, ni anclaj...
Edición mejorada de los contenidos<br />Título en minúsculas<br />Potenciar la lectura en diagonal: Viñetas y anclajes vis...
Uso de colores<br /><ul><li>Ayudan a entender el significado de la información
Atractor de atención
Aumentan la legibilidad y minimiza la fatiga visual
Color blanco: importante para crear páginas estructuradas y ordenadas</li></ul>Pero...<br /><ul><li>Un color equivocado di...
Un 8-10% de hombres tiene problemas de daltonismo (rojo-verde de las tablas de cotizaciones)</li></li></ul><li>Contraste f...
Conversión<br />
Landing page:la página orientada a la conversión<br />
¿Qué es una landing page?<br />Página de aterrizaje en la web desde contenido o anuncio<br />Optimizada para conseguir la ...
Conocer el patrón de comportamiento de los usuarios<br />
El efecto tunel en una landing page<br />Eliminar cualquier distracción que impida completar el proceso:<br /><ul><li>Banners
Barras de navegación
Rutas
Enlaces</li></ul>Fuente: Usolab<br />
Estrategias para potenciar la venta online <br />
Promociones para incentivar una primera compra<br />Cliente => miedo, poco tiempo y formas ilógicas de tomar decisiones<br...
¿Cómo reducir la percepción del riesgo?<br />Demostraciones interactivas<br />Banca online: demostraciones de la operativa...
Ejemplo de periodo de prueba<br />
Demostración de operativa<br />
Informe gratuito... si se registra<br />
Promociones para incentivar altas<br />
Marketing contextual<br />De la interrucción para vender (spot publicitario) a la sugerencia de compra<br />Vender un prod...
Barra social para generar viralidad<br />Enlaces relacionados de interés para el usuario<br />
Personalización<br />Usuario selecciona preferencias (customización)<br />Personalización basada en navegación pasada<br /...
Recomendaciones basadas en compras pasadas<br />94<br />
Herramientas de valor añadido<br />¿Qué valor puedo ofrecer a mis clientes online mejor que presencial?<br />Consultaen ti...
Gestión de usuarios, proceso de registro y pago<br />
Identificación de cliente<br />Distinguir claramente nuevos clientes de los clientes registrados<br />Proceso de registro ...
Proceso de registro<br /><ul><li>Obstáculo a sortear (genera experiencias negativas)
Ha de ser rápido y directo
Solicitar sólo los datos esenciales
Diseño simplificado de las páginas</li></li></ul><li>Proceso de compra según clientes<br />Clientes antiguos<br /><ul><li>...
Proceso de pago</li></ul>Clientes nuevos<br /><ul><li>Registro
Proceso de pago</li></li></ul><li>Distinguir tipos de clientes<br />Separación visual del acceso para clientes y el proces...
Distinguir tipos de usuarios<br />Cajas de acceso correctamente nombradas<br />Opción para usuarios que han olvidado su co...
Presentación visual clara<br />Una sola columna para las cajas<br />Nombres de campos justificados a la derecha junto a la...
No poner cajas en varias columnas<br />Más dificultad para rellenar los datos<br />
Accesibilidad de formularios<br />Cada elemento del formulario asociado a un único texto<br />Debe ser posible rellenar un...
Botones estándar<br />Botones estándar: Color gris, sombra simula 3D y texto de color negro<br />Botones NO estándar. <br ...
Upcoming SlideShare
Loading in …5
×

Gestion de contenidos en Internet

826 views
740 views

Published on

Taller sobre contenidos digitales impartido por Miguel Arias (Rankia) en la Jornada de Aceleración Empresarial organizada por el Centro de Innovación Turística de Andalucía el 29 de septiembre de 2011 en Cadiz.

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
826
On SlideShare
0
From Embeds
0
Number of Embeds
69
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Gestion de contenidos en Internet

  1. 1. GESTIÓN DE CONTENIDOS EN INTERNET<br />Miguel Arias<br /> #labtalleres<br />
  2. 2. ¿Qué queremos hacer en Internet?<br />¿Cómo atraemos a los usuarios?<br />Mensajes publicitarios<br />Persuasión<br />Contenidos: la importancia de la experiencia del usuario<br />La página de inicio<br />Navegación y visibilidad del estado del sistema<br />Redacción y presentación de productos<br />Gestión de usuarios proceso de registro y pago<br />Conversión<br />Las páginas de aterrizaje<br />Estrategias para potenciar la venta online<br />Correo electrónico: Contacto comercial y fidelización<br />Análisis de los resultados<br />
  3. 3. ¿Qué queremos hacer en Internet?Posicionamiento online<br />
  4. 4. ¿Qué queremos hacer en Internet?<br />Investigación<br />Empresa<br />¿Para qué Internet?<br />Clientes<br />¿Qué quieren y qué expectativas tienen?<br />Competencia<br />¿Qué están haciendo?<br />Mejores prácticas<br />Entorno<br />Tendencias del sector<br />
  5. 5. ¿Para qué Internet?<br />Objetivos generales de la empresa<br />Valor añadido a ofrecer<br />Vender 24 horas / 365 días<br />Informar<br />Publicidad<br />Vínculo con los clientes<br />Atención personalizada 24 horas<br />Crear comunidad<br />...<br />5<br />
  6. 6. Definir la audiencia potencial<br />Perfil de usuarios: edad, educación, trabajo, experiencia con Internet, actividades sociales y ocio, etc.<br />Conocer el lugar de interacción<br />Conocer las tareas típicas a realizar<br />Crear escenarios sobre cómo usa Internet cada audiencia para realizar una tarea dada.<br />
  7. 7. Métricas: CPM, CTR, Leads, Fidelización<br />7<br />
  8. 8. 8<br />Embudo del ciclo de vida del cliente<br />
  9. 9. ¿Cómo atraemos a los usuarios?Captación de visitas<br />
  10. 10. Atención: recurso más escaso<br />10<br />
  11. 11. Economía de la atención<br />“Permission marketing” (SethGodin, 1999): El tiempo es el único recurso realmente escaso<br />¿Cómo conseguir más atención?<br />Generar emoción en el receptor (Marketing de experiencias.<br />Sincronizar los mensajes con las situaciones personales que vive el receptor (Marketing contextual)<br />Aprovechar la necesidad de reconocimiento social para difundir información (“enviar a un amigo”).<br />Multicanal: Web, e-mail, teléfono, móvil, PDA<br />
  12. 12.                 <br />¿Cómo se encuentra un sitio web?<br />Fuente: Tendencias digitales<br />
  13. 13. 13<br />Nombre del dominio web<br />El dominio es la marca en Internet<br />Selección compleja e importante<br />Requisitos del nombre de dominio:<br />Corto<br />Reconocimiento con la actividad de la empresa<br />Fácilmente memorizable<br />Evitar confusiones (guiones, números, extensiones)<br />Claridad: ¿la fonética tiene diversas escrituras?<br />Originalidad y tono positivo<br />
  14. 14. Nombre del dominio web<br />
  15. 15. SEO (Optimización para buscadores)<br /><ul><li> Web accesible: limitar contenido en Flash, frames ...
  16. 16. Títulos únicos y buenas descripciones del contenido de cada página.
  17. 17. Crear contenidos con textos que contienen palabras clave que buscan los usuarios.
  18. 18. Conseguir enlaces (¡sin pagar!) de otras webs de temática similar.</li></li></ul><li>Contenidos para SEO<br />
  19. 19. Funcionamiento de Google<br />Publicidad autogestionada<br />Contenido relevante<br />
  20. 20. Publicidad online: Google Ad Words<br />
  21. 21. Google Places: hay que estar<br />Google Places<br />
  22. 22. Social Media vs Mass media<br />20<br /><ul><li>Contenido generado por los usuarios
  23. 23. Acceso gratuito
  24. 24. Facilidad para crear y editar contenidos
  25. 25. Instantaneidad en la producción de contenido
  26. 26. Audiencia global
  27. 27. Viralidad</li></li></ul><li>Herramientas para compartir crecen exponencialmente<br /><ul><li>Facebook: 800 millones de usuarios
  28. 28. Twitter: 200 millones de usuarios
  29. 29. Linkedin
  30. 30. Google +
  31. 31. YouTube
  32. 32. Slideshare
  33. 33. Y las que no triunfaron: Hi5, Friendster, MySpace, </li></ul>SecondLife,…<br />21<br />
  34. 34. Presencia en Facebook<br />¿Página, perfil o grupo?<br />Página tiene orientación empresa <br /><ul><li>Sin límite de contactos
  35. 35. Visible sin login
  36. 36. Fans no requieren confirmación</li></ul>http://www.facebook.com/pages/create.php<br />
  37. 37. Algunos consejos para Facebook<br /><ul><li>Voz personal
  38. 38. Fotos y rostros
  39. 39. Respuesta emocional (target)
  40. 40. Inicia debate
  41. 41. Horario fuera de oficina
  42. 42. Evitar demasiados mensajes en un solo día.
  43. 43. Los sábados y domingos buenos días para publicación.</li></ul>Fuente: Hootsuite / Mashable<br />
  44. 44. Presencia en Twitter<br />
  45. 45. Presencia en Linkedin<br />
  46. 46. Mensajes publicitarios online<br />
  47. 47. ¿Qué funciona? Observar Google<br />Guía editorial de Google AdWords<br />La publicidad más eficaz comunica un mensaje claro a un público segmentado. <br />Dos principios simples:<br />Descripción clara y precisa del producto o servicio. <br />Resaltar las ventajas exclusivas del producto.<br />
  48. 48. Métrica de Google Ads<br />OPV de FadesaInversores particulares opinan sobre la OPV de Fadesawww.rankia.com Interés: 2.330 Clics | 8,1% CTR | €0,07 CPC Servido - 100% <br />Google publica automáticamente con más frecuencia los anuncios con mayor CTR (porcentaje de clics sobre impresiones)<br />
  49. 49. Ceguera cognitiva a los banners<br />Captar la atención: se utilizamovimiento, contrastes, coloresfuertes....<br />Esquema perceptivo (forma, colores, aspecto publicitario) => Información irrelevante<br />Estimulo de forma repetida: Insensibilización<br />
  50. 50. Ceguera cognitiva a los banners<br />
  51. 51. La percepción<br />Varía según los estímulos del contexto:<br />Volumen de información que le rodea<br />Color de fondo<br />La posición de los otros estímulos en el rango perceptivo<br />
  52. 52. La percepción según el contexto<br />¿Dos caras?<br />¿Una copa?<br />32<br />
  53. 53. ¿Qué circulo central es mayor?<br />Dependiendo de los elementos que le rodean el círculo central se percibe mayor o menor.<br />
  54. 54. Persuasión<br />
  55. 55. La importancia de la experiencia del usuario y la usabilidad<br />
  56. 56. ¿Ofrecer una buena experiencia online?<br /><ul><li>Condición necesaria: regla AFUFU
  57. 57. ¿Accesible? Normativa W3C (1999)
  58. 58. ¿Funciona? Servidores, conexión a Internet
  59. 59. ¿Fácil de Usar? Análisis de usabilidad</li></ul>Una tecnología invisible es una tecnología madura<br /><ul><li>... Pero no suficiente (buscar valor añadido: herramientas y contenidos diferenciales, etc.)</li></ul>36<br />
  60. 60. Accesibilidad a los contenidos<br />9% de la población española (3,5 M.) sufre alguna discapacidad física o cognitiva.<br />Pautas de la Web AccessibilityIniciative del W3C (1999): Lista de criterios (“checkpoints”) con tres tipos de prioridades en función de su importancia. <br />
  61. 61. No sólo las personas discapacitadas tienen problemas de accesibilidad...<br />Personas mayores (problemas de visualización)<br />Personas con equipos antiguos: Compatibilidad de navegadores vs. Estándares del W3C <br />
  62. 62. Recomendaciones de accesibilidad<br />Todo el texto se debe ofrecer como texto (no como imagen).<br />Poder aumentar el tamaño de las fuentes.<br />Ofrecer contenidos alternativos para imágenes (etiqueta “alt”), animaciones, gráficos, etc.<br />No utilizar imágenes o textos que se mueven.<br />Los contenidos deben ser comprensibles si se ven sin color (contraste).<br />No obligar a descargarse plug-ins, ni utilizar scripts o applets en funciones esenciales del sitio web.<br />
  63. 63. Validadores de accesibilidad: TAW<br />TAW http://www.tawdis.net/<br />Ver el contenido de la página desde un navegador sólo texto (Lynx) o desde un navegador gráfico con imágenes desactivadas <br />
  64. 64. Facilitar accesibilidad<br />
  65. 65. Funcionalidad del sitio web<br />Fallos del servidor (tests de carga emulando horas punta)<br />Velocidad de descarga de las páginas<br />Compatibilidad con diversos navegadores: Explorer, Firefox, Safari (Mac), Opera.<br />Compatibilidad con principales resoluciones de pantalla (1024x768, 1280x800, 1366x768): Evitar scroll horizontal<br />Integridad de los enlaces del sitio <br />
  66. 66. ¿Qué es la usabilidad?<br />Medida de la facilidad que tiene un usuario para conseguir sus objetivos al navegar por unaweb.<br />Combinación de factores:<br />Facilidad de aprendizaje (completar tareas sin conocer previamente la interfaz)<br />Eficiencia de uso para realizar rápidamente tareas<br />Frecuencia de errores y grado de gravedad<br />Satisfacción subjetiva (experiencia del usuario)<br />
  67. 67. Lo más importante es pensar en el usuario<br />Premisa nº 1 de Google:<br />La interfaz clara y sencilla<br />Las páginas cargan al instante <br />El puesto en los resultados de la búsqueda no está a la venta. <br />La publicidad que aparece en el sitio debe ofrecer contenido relevante y no resultar una distracción. <br />Resultado: Google ha conseguido tener el público más leal de la web. Este crecimiento no se ha conseguido gracias a campañas publicitarias en televisión, sino a las recomendaciones de los usuarios satisfechos.<br />
  68. 68. Diseño centrado en los usuarios<br />45<br />
  69. 69. 5-8 usuarios por tipo de audiencia es suficiente<br />
  70. 70. Definir la audiencia<br />Perfil socio-demográfico de los usuarios: <br />Edad<br />Sexo<br />Experiencia navegando por la Web<br />Experiencia comprando online, siendo cliente banco, etc. <br />Nivel de educación<br />Conocer el lugar de interacción (trabajo, casa ...) y las tareas típicas realizadas<br />Crear escenarios de uso (guión sobre cómo usa el sitio cada audiencia para realizar una tarea dada). <br />
  71. 71. Página de inicio<br />
  72. 72. Objetivos de la página de inicio<br />Descarga rápida (max. 10 segundos) y Accesibilidad<br />Priorizar lo más importante, evitando recargamiento<br />Orientación: facilitar el acceso a tareas o contenidos<br />Dinamicidad:<br />Destacar productos y servicios<br />Novedades de la empresa<br />Evitar frialdad interface (humanización)<br />
  73. 73. Velocidad de descarga de la página<br /><ul><li>Prioridad para los usuarios
  74. 74. Incluir sóloimágenes que ayuden a comprender la información
  75. 75. Optimización y reutilización de imágenes
  76. 76. No usar frames ni Flash no solicitado: ralentiza la descarga</li></li></ul><li>Propuesta de valor clara desde inicio<br />Cada píxel vale oro: ¿Cómo son los escaparates de las tiendas más caras?<br />Priorizar, priorizar, priorizar<br />¿Por qué debería un cliente visitar nuestro sitio web? <br />¿Qué servicios especiales se le ofrecen a través de la web?<br />¿Cómo se le va a premiar por ser fiel a la compañía? <br />
  77. 77. Propuesta de valor clara<br />Comunicar de manera clara y efectiva las ventajas<br />
  78. 78. Menos es más: Aprender a priorizar<br />
  79. 79. La importancia del layout<br />Tipografía clara<br />Jerarquía visual<br />Uso de espacios en blanco<br />Color azul: seguridad y tranquilidad<br />Evitar exceso:<br /><ul><li>Imágenes
  80. 80. Colores
  81. 81. Iconografía
  82. 82. Líneas
  83. 83. Recuadrados y fondos de color</li></li></ul><li>Dirigir la atención del usuario<br />La imagen de una persona atrae la atención y dirige a la información que al banco le interesa destacar<br />
  84. 84. Navegación y visibilidad del estado del sistema<br />
  85. 85. Diseño centrado en los usuarios<br />“No me hagas pensar” (Steve Krug)<br />“No me hagas perder tiempo”<br />Simplicidad: la guía de usabilidad más importante<br /> Estructuración de categorías según la lógica cognitiva de los usuarios, no de la empresa<br />No existe el diseño perfecto. Sólo unos cuantos principios que hay que aplicar a cada caso concreto.<br />Adaptación evolutiva: necesidad de prueba y error y de ciclos de rediseño rápidos<br />
  86. 86. Tres preguntas clave en una página<br /><ul><li>¿Dónde puedo ir desde aquí?
  87. 87. Enlaces hipertextuales estándar (subrayados y en azul)
  88. 88. Barra de navegación global y local
  89. 89. Barra de utilidades (mapa del sitio, inicio, contactar, etc.)
  90. 90. ¿Dónde estoy?
  91. 91. En relación a la WWW como todo (logotipo)
  92. 92. En relación a la estructura del sitio (señalar visualmente en la barra de navegación global y local o en la ruta de navegación)
  93. 93. ¿Dónde he estado?
  94. 94. Colores de enlace estándares (morado = enlace visitado)</li></li></ul><li>¿Por qué seguir las convenciones?<br />“La red es la experiencia del usuario”(Jacob Nielsen)<br />Los usuarios pasan la mayoría de su tiempo en otros sitios web.<br />Una convención reduce la necesidad de aprendizaje.<br />
  95. 95. No obligar a pensar<br />
  96. 96. ¿Seguimos los estándares?<br />Con independencia del idioma el usuario debe comprender la estructura de navegación<br />
  97. 97. Tu web es una pequeña parte en la <br />experiencia de tus usuarios<br />…especialmente en procesos de búsqueda<br />Ej./ Decisión de compra de un proyector (J. Nielsen). <br />45 minutos visita 15 webs viendo 93 páginas (29 seg. por página): <br />Buscador. <br />Webs de Fabricantes y Tiendas: especificaciones técnicas<br />Tiendas online: precios, plazos de entrega<br />Sitios con comentarios del producto por clientes<br />Multicanal: incorporan otras fuentes (visitas, teléfono).<br />Pocos usuarios visitan tu web de la forma que crees:<br />Sólo un 20-40% entra por la página de inicio.<br />62<br />
  98. 98. ¿Cómo encontrar un producto?<br />Dos formas básicas:<br />Navegar por categorías (Browsing): <br />Opciones en el menú de navegación<br />Desplegables<br />Directorio<br />Navegar buscando (Searching): usuario con objetivos claros<br />
  99. 99. Denominación de opciones y productos<br />El Arte de titular bien: es complejo y necesita feed-back de los usuarios<br />Comunicar información de forma eficiente<br />Reflejar el lenguaje de los usuarios, no el de la empresa<br />Tests de Usuarios: descubrir qué literales no entienden<br />Evitar iconos sin texto adjunto<br />Evitar denominaciones ambiguas<br />
  100. 100. Redacción y presentación de productos y servicios<br />
  101. 101. Presentación de contenidos online<br />1. Estructurar para una consulta rápida (ojear)<br />2. Lo mas importante al principio<br />3. Lenguaje claro y conciso<br />4. Lenguaje objetivo en lugar de publicitario (Google Ads)<br />5. Párrafos y oraciones cortas<br />6. Utilizar enlaces hipertextuales<br />7. Tamaño de fuente suficiente (aumentar con edad)<br />8. Contrastesuficiente entre fuente y fondo<br />9. Texto estático (no animación) <br />10. MAYÚSCULAS: MÁS DIFÍCILES DE LEER<br />11. Versión para imprimir<br />
  102. 102. 67<br />Título de página<br />Cada página debe tener un título diferente<br />Título tiene dos funciones:- indicar en qué página se encuentra el visitante-resumir lo que puede encontrar en ella<br />Requisitos:- Nominativo- Contraste- Justificación a la izquierda- No mayúsculas<br />
  103. 103. Ofrecer consistencia en todo el sitio<br />Coherencia en la composición, localización y utilización de colores <br />Confiere identidad al sitio<br />Ayuda en aprendizaje y memorización <br />Evita desorientación <br />
  104. 104. Fuentes<br />Fuente por defecto en el Sistema operativo<br />Sin serifa (Arial, Verdana, Tahoma, etc.)<br />Tamaño en valores relativos (%)<br />No justificar a la dcha.<br />Buen contraste fuente - fondo<br />
  105. 105. Facilitar la lectura en diagonal<br />Viñetas<br />Negritas: anclajes visuales<br />Hipertexto<br />Una idea por párrafo<br />
  106. 106. Evitar mayúsculas en contenidos<br />Discontinuidad fuentes facilita la lectura<br />
  107. 107. Imágenes que aporten información<br />
  108. 108. Malapresentación de contenidos online<br />Título no descriptivo, en mayúsculas y subrayado<br />No hay viñetas, ni anclajes visuales<br />Justificado a la derecha<br />No se facilita la contratación<br />
  109. 109. Edición mejorada de los contenidos<br />Título en minúsculas<br />Potenciar la lectura en diagonal: Viñetas y anclajes visuales con negritas<br />Enlaces relacionados<br />Sin justificación a la derecha<br />Se facilita la contratación con botón llamativo<br />74<br />
  110. 110. Uso de colores<br /><ul><li>Ayudan a entender el significado de la información
  111. 111. Atractor de atención
  112. 112. Aumentan la legibilidad y minimiza la fatiga visual
  113. 113. Color blanco: importante para crear páginas estructuradas y ordenadas</li></ul>Pero...<br /><ul><li>Un color equivocado distrae la atención y reduce el nivel de comprensión
  114. 114. Un 8-10% de hombres tiene problemas de daltonismo (rojo-verde de las tablas de cotizaciones)</li></li></ul><li>Contraste fuente-fondo<br />
  115. 115. Conversión<br />
  116. 116. Landing page:la página orientada a la conversión<br />
  117. 117. ¿Qué es una landing page?<br />Página de aterrizaje en la web desde contenido o anuncio<br />Optimizada para conseguir la conversión en cliente<br />Definición del objetivo de conversión > datos, reserva, etc. <br />
  118. 118. Conocer el patrón de comportamiento de los usuarios<br />
  119. 119.
  120. 120. El efecto tunel en una landing page<br />Eliminar cualquier distracción que impida completar el proceso:<br /><ul><li>Banners
  121. 121. Barras de navegación
  122. 122. Rutas
  123. 123. Enlaces</li></ul>Fuente: Usolab<br />
  124. 124.
  125. 125. Estrategias para potenciar la venta online <br />
  126. 126. Promociones para incentivar una primera compra<br />Cliente => miedo, poco tiempo y formas ilógicas de tomar decisiones<br />¿Cómo vencer la desconfianza al medio y a la empresa?<br />Cliente no maximiza su elección. Busca lo “suficientemente bueno” (good enough)<br />Minimiza el riesgo de una mala experiencia<br />Reducir los riesgos percibidos<br />
  127. 127. ¿Cómo reducir la percepción del riesgo?<br />Demostraciones interactivas<br />Banca online: demostraciones de la operativa<br />Períodos de prueba sin pagar <br />Ejemplo: Empresas de software (programas trials)<br />Ejemplo: suscripción gratuita a revista online por 15 días <br />Niveles de acceso: usuarios, registrados y suscriptores (clientes premium)<br />Ejemplo: Acceso de suscriptores a los informes de los analistas del broker online<br />
  128. 128. Ejemplo de periodo de prueba<br />
  129. 129. Demostración de operativa<br />
  130. 130. Informe gratuito... si se registra<br />
  131. 131. Promociones para incentivar altas<br />
  132. 132. Marketing contextual<br />De la interrucción para vender (spot publicitario) a la sugerencia de compra<br />Vender un producto dentro del contexto que sintoniza con los deseos del cliente<br />Enlaces o productos relacionados<br />
  133. 133. Barra social para generar viralidad<br />Enlaces relacionados de interés para el usuario<br />
  134. 134. Personalización<br />Usuario selecciona preferencias (customización)<br />Personalización basada en navegación pasada<br />Customización: poco usada (elección opciones por defecto)<br />Buena personalización requiere software potente (data mining) <br />Buena navegación es personalización de facto: el usuario elige en cada momento<br />
  135. 135. Recomendaciones basadas en compras pasadas<br />94<br />
  136. 136. Herramientas de valor añadido<br />¿Qué valor puedo ofrecer a mis clientes online mejor que presencial?<br />Consultaen tiempo real<br />Comparadoresde productos ofertados<br />Recomendaciones basadas en perfil<br />......<br />
  137. 137. Gestión de usuarios, proceso de registro y pago<br />
  138. 138. Identificación de cliente<br />Distinguir claramente nuevos clientes de los clientes registrados<br />Proceso de registro como usuario<br />Proceso de pago<br />Modificaciones de datos del cliente<br />
  139. 139. Proceso de registro<br /><ul><li>Obstáculo a sortear (genera experiencias negativas)
  140. 140. Ha de ser rápido y directo
  141. 141. Solicitar sólo los datos esenciales
  142. 142. Diseño simplificado de las páginas</li></li></ul><li>Proceso de compra según clientes<br />Clientes antiguos<br /><ul><li>Nombre de usuario y contraseña
  143. 143. Proceso de pago</li></ul>Clientes nuevos<br /><ul><li>Registro
  144. 144. Proceso de pago</li></li></ul><li>Distinguir tipos de clientes<br />Separación visual del acceso para clientes y el proceso de registro para nuevos clientes<br />Estándar:Izquierda acceso clientes<br />
  145. 145. Distinguir tipos de usuarios<br />Cajas de acceso correctamente nombradas<br />Opción para usuarios que han olvidado su contraseña<br />
  146. 146. Presentación visual clara<br />Una sola columna para las cajas<br />Nombres de campos justificados a la derecha junto a las cajas<br />Ayudas contextuales claramente visibles<br />Agrupación visual de datos por áreas<br />
  147. 147. No poner cajas en varias columnas<br />Más dificultad para rellenar los datos<br />
  148. 148. Accesibilidad de formularios<br />Cada elemento del formulario asociado a un único texto<br />Debe ser posible rellenar un formulario empleando únicamente el teclado<br />Botones textuales o con texto alternativo<br />Permitir enviar sin utilizar script<br />
  149. 149. Botones estándar<br />Botones estándar: Color gris, sombra simula 3D y texto de color negro<br />Botones NO estándar. <br />El usuario debe esforzarse para reconocer que se trata de un botón<br />
  150. 150. Marcar los campos obligatorios<br />Estándar: señalizar con un asterisco<br />Informar al principio del formulario<br />Situar tras el título del campo<br />
  151. 151. Señalizar los pasos del proceso<br />Información del proceso:- Avance- Estado actual<br />Acceso a la edición de apartados anteriores del proceso<br />
  152. 152. Evitar solicitar datos innecesarios<br />Datos estadísticos no necesarios. Pedir, en su caso, una vez sea cliente<br />
  153. 153. Corrección de errores<br />Explicar los errores<br />Señalizar los campos erróneos<br />No borrar los datos ya introducidos<br />
  154. 154. Confirmación delos datos del registro<br />Información de los datos de registro<br />¿Opción para cambiar los datos?<br />
  155. 155. Proceso de pago<br />Confirmación de la transacción <br />Formas de pago<br />Integración visual de la pasarela de pagos<br />Impresión de la compra realizada<br />
  156. 156. Confirmación del pedido<br />Previo al pago<br />Facilitar la edición de la información<br />Productos comprados<br />Dirección de entrega<br />Costes totales<br />Gastos de envío antes de confirmar el pedido<br />
  157. 157. Integración de la pasarela de pagos<br />Diseño integrado:<br /><ul><li>Mantiene la consistencia visual
  158. 158. Facilita la interacción
  159. 159. Percepción de seguridad</li></li></ul><li>Imprimir recibo<br />Eliminar menús de navegación<br />Incluir datos de facturación<br />Gestión de usuarios, registro y pago © Soluciones Interactivas, S.L. www.emergia.net<br />114<br />
  160. 160. Correo electrónico:Contacto comercial y fidelización<br />
  161. 161. Herramientas de fidelización<br />Correo electronico<br />Generar comunidad<br />Alertas personalizadas (por e-mail, móvil, PDA)<br />Newsletters(e-mail)<br />Personalización en la web: Recomendaciones adaptadas al perfil del cliente (compras pasadas y data mining con clientes similares)<br />Encuestas<br />
  162. 162. Atención al cliente por e-mail<br />Gran importancia: e-mail se percibe como algo más personal y emocional que el sitio web.<br />Ojo con el phising: petición fraudulenta de datos por e-mail <br />Respuesta a los correos de clientes:<br />Rápida: inferior a 24 horas (mejor máximo 6)<br />Remitente y Asunto claros (no confundir con spam o virus)<br />Mensaje con información útil y concisa<br />Personalizada<br />Firmada<br />
  163. 163. ¿Formulario web o e-mail?<br />Formulario web (evitar spam) <br />Antes de enviar e-mail: Leer preguntas frecuentes<br />No exigir demasiados campos con datos personales. A los usuarios les impacienta introducir muchos datos estructurados<br />Clasificar y dirigir las consultas al departamento adecuado<br />Opción de previsualización antes de enviar (prevención de errores)<br />Posibilidad de enviar copia al e-mail del remitente (constancia de fecha, hora y mensaje)<br />
  164. 164. El formulario de webmail debe ser breve<br />5 campos máximo de identificación<br />Cajas estándar y con la longitud adecuada<br />Los formularios largos estimulan la toma de vías alternativas de contacto (teléfono)<br />
  165. 165. Informar del envío<br />
  166. 166. ¿Quién envía el e-mail?<br />Cuenta de correo debe ser claramente reconocible<br />
  167. 167. ¿Es una respuesta a mi pregunta?<br />Claridad del “Asunto”:<br /><ul><li>Prefijo “Re:” (percibido importante)
  168. 168. Títulos cortos y no genéricos
  169. 169. No abusar de códigos internos
  170. 170. No usar Prefijo “Fw:” (percibido secundario)</li></li></ul><li>Personalizar la respuesta en el e-mail<br />El usuario debe percibir que la respuesta está escrita sólo para él.<br />Iniciarse con un saludo personal<br />Tratarlo de forma individualizada<br />Firmado por una persona, con posibilidades de contacto multicanal<br />
  171. 171. Buena respuesta por e-mail<br />Indicar claramente la cuenta de correo del banco que lo envía<br />El mensaje debe ir firmado por la persona que lo redacta, indicando el departamento al que pertenece<br />Ofrecer un teléfono y un e-mail de contacto para resolver dudas adicionales<br />124<br />
  172. 172. Contenido y formato del email<br />Contenido<br />Preciso y descriptivo (enlaces activos a información adicional)<br />Voz activa y personal<br />URLs muy largas crean problemas<br />Formato<br />Texto sin formato (diversidad de plataformas de email)<br />Caracteres estándar y fondo blanco<br />Espacios en blanco<br />
  173. 173. Contenido informativo vs Contenido comercial<br />www.rankia.com www.verema.com<br />126<br />¿Comercio electrónico o comunidad virtual?<br />
  174. 174. Lista de suscriptores (newsletter)<br />Fidelización (recuerdo de la empresa)<br />Aumenta el vínculo emocional con la empresa (email se percibe como personal)<br />Incentivo para entrar en el sitio web<br />Voluntariedad: facilidad para alta y baja de la lista<br />Ofrecer información destacada y promoción de productos<br />
  175. 175. Mejorar la efectividad de la newsletter<br />En la web:<br />Enlace visible para darse de alta<br />Predecibilidad en la frecuencia del envío<br />Ofrecer un ejemplo en el sitio web<br />Sólo pedir e-mail para darse de alta<br />Libertad y facilidad para alta y baja de la lista<br />En el e-mail:<br />Asunto específico y diferente en cada ocasión<br />Extensión limitada (“menos es más”)<br />Edición para lectura online: Facilitar el ojeado<br />Posibilidad de darse de baja en cada e-mail<br />
  176. 176. Información sobre la newsletter<br />Anunciar periodicidad<br />Ver un ejemplo<br />Alta, modificaciones y bajas<br />
  177. 177. Modificaciones del suscriptor<br />Alternativas en la newsletter<br />Modificaciones en el sitio web<br />
  178. 178. Contenidos: menos es más<br />Sólo 23% de las newsletters son leídas totalmente (Fuente: NNGroup)<br />El 27% de las newsletters no son abiertas o se leen por encima (Fuente: NNGroup)<br />
  179. 179. Newsletter de Rankia<br />Títulos únicos<br />Alternativas a usuarios con programas de correo antiguos o formatos solo texto<br />
  180. 180. Experimento de newsletter descuento<br />Datos ficticios de simulación realizada (Fuente: ¿Hay BTC en España?, IESE)<br />
  181. 181. Alertas por correo electrónico<br />Servicio automatizado<br />Generadas de forma voluntaria por el propio usuario:<br />Cuando haya una oferta.<br />Cuando alguien comente un restaurante.<br />Cuando contesten a un comentario.<br />...<br />
  182. 182. Alertas<br />
  183. 183. Alertas: eficaces recordatorios<br />
  184. 184. Encuestas de servicio al cliente<br />Los clientes valoran que les pregunten su opinión <br />...si no les supone mucho esfuerzo responder y hay incentivos (sorteos de regalos)<br />Formulario breve: No más de 5 minutos para contestar<br />Campo abierto para recoger comentarios generales<br />Ayuda a determinar áreas con problemas<br />Cruzar la información obtenida con los datos de tráfico web y los tests usabilidad (lo que dicen vs lo que hacen)<br />
  185. 185. Analizar resultados<br />
  186. 186. Auditoría del tráfico web<br />
  187. 187. Auditoría del tráfico web<br />
  188. 188. ¿Quiénes y cómo te visitan?<br />Procedencia:<br />España: 86%<br />Mexico: 2,48%<br />Colombia: 1,83%<br />… Hasta 139 países<br />Navegadores<br />Explorer: 45%<br />Firefox: 26%<br />Chrome: 19%<br />…Hasta 89 navegadores (PDAs, Playstation, móviles, etc.)<br />Resoluciones de pantalla:<br />1024x768: 20,65%<br />1280x800: 14,75%<br />… hasta 223 resoluciones distintas<br />
  189. 189. 2ª oleada: Internet en la mano<br />
  190. 190. Datos de campaña publicitaria<br />Nº leads<br />Nº impresiones publicitarias<br />Nº conversiones<br />CTR: tasa de ClickThrough<br />Tasa de conversión<br />
  191. 191. Modelos publicitarios<br />CPM: coste por 1.000 impresiones<br />Performance<br />CPC: coste por clic<br />CPL: coste por lead<br />CPA: coste por adquisición<br />
  192. 192. Tasa de conversión y fidelización<br />Porcentaje de usuarios que se convierten en clientes o realizan alguna acción deseada (ej. registrarse) <br />Tasa de conversión: 0,1-2 % en sitios comerciales<br />El número de visitantes únicos cada vez tiene menos sentido como métrica (entradas desde buscadores)<br />La fidelización de los visitantes se convierte en un arma competitiva clave (envío de newsletters, alertas, creación de comunidad, etc.)<br />145<br />
  193. 193. La necesidad de mejora continua<br />Mejorar una web es un proceso continuo de prueba y error.<br />Escalabilidad: planificar el crecimiento futuro<br />Gradualidad: necesidad de adaptación de usuarios acostumbrados a un diseño.<br />Saber “mirar” lo que hacen los clientes más que lo que dicen: tráfico web vs. encuestas de satisfacción<br />
  194. 194. Optimización mediante pruebas A/B<br />
  195. 195. La necesidad de mejora continua<br />Investigación<br />Valoración de resultados<br />Arquitectura inf.<br />Promoción<br />Desarrollo<br />Lanzamiento<br />Análisis de usabilidad<br />
  196. 196. ¡Gracias por la atención!<br />Miguel Arias<br />miguel@rankia.com<br />

×