El documento aborda la importancia de una presencia web profesional para pymes, ofreciendo 10 claves para el éxito de una web corporativa, que incluyen la definición de objetivos, diseño usable y contenido actualizado. Además, destaca conceptos clave de arquitectura y usabilidad web, enfatizando la necesidad de un diseño accesible y optimizado para motores de búsqueda. También se sugieren estrategias para atraer tráfico y mejorar el posicionamiento online, así como la relevancia de la identidad digital y la promoción en tiempos de crisis.

1. PRESENCIA EN LA RED PARA PYMES
www.domestika.com www.domestika.org Por: Pedro Jesús González

2. — 10.000 clientes, 5 años
— 120 profesionales
— Socios:
madrid tecnología,
camerpyme, ministerio
industria, google, paypal,
vocento, yahoo!
— Tecnología propia
— Domestika.org

3. ¿Cuándo es el viaje a las Islas Galápagos?
¿Cuántos años tiene la marca BYC?

4. ¿Qué es una Presencia Web Profesional?

5. Es aquella que no está realizada pensando en su
dueño
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

6. Aquellas en la que
se tienen en cuenta
todos los
navegadores
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

7. En la que se
tienen en
cuenta los
detalles
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

8. La que sabe adaptar las herramientas a las
necesidades…
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

9. … incluso cuando
no parece posible
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

10. Y ofrece siempre una alternativa
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

11. En la que no se aporta información irrelevante
para el usuario
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

12. Una presencia web profesional, no deja las cosas
a medio hacer
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

13. no aporta información contradictoria
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

14. Tiene en cuenta las necesidades de los usuarios
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

15. Aprovecha el espacio visual
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

16. Sin sobrecargarlo
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

17. Ofrece ideas innovadoras a problemas comunes
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

18. Porque la competencia está a un clic de distancia
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

19. No tiene fallos de programación
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

20. Los textos son redactados de forma sincera y
pensando en el beneficio del usuario
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

21. Siendo breves siempre que sea posible…
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

22. … pero sin ser imprecisos
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

23. No comete faltas de ortografía
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

24. y cuida las imagénes utilizadas
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

25. Tiene en cuenta que los usuarios van a opinar
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

26. Ofrece la misma información en toda la web
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

27. Cuida los mensajes de
error
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

28. Cuida su identidad visual
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

29. No ofrece ambigüedades
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

30. No pretende dar una solución a todas las necesidades de
negocio
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

31. … y tiene unos objetivos claramente definidos.
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

32. Ofrece una navegación limpia y segura
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

33. Y tiene un importante trabajo por detrás
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

34. No tiene elementos dispuestos al azar sin que
aporten información
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

35. Establece claras llamadas a la acción
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

36. … pues los usuarios las cumplimos.
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

37. Los textos son redactados de forma sencilla
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

38. Nunca sacrifica función a favor de un
malentendido Diseño.
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

39. Es actualizado frecuentemente…
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

40. Atiende a usuarios con distintas necesidades
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

41. Ofrece siempre una navegación segura
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

42. Nunca incluye elementos como “En construcción”
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

43. Es unívoco
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

44. De verdad…
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

45. No toma imágenes de Google sin informarse
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

46. … y sus contenidos son revisados antes de
publicarlos
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

47. Es, en definitiva, lo contrario a esto:
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

48. Diseño de Conversión

49. El embudo de conversión
Usuarios de Internet
Encuentran nuestra web
Marketing
Navegan por nuestra web
Encuentran nuestro formulario,
tienda online… Diseño Web
+ Usabilidad
= Diseño de
Los que empieza Interacción
un proceso
Los que lo terminan
Los que nos recomiendan
Servicio,
Los que vuelven claro…
“El embudo de conversión surge de la Analítica Web”

50. Una estrategia general:
SEO
+ SEM
+ + = Atraer Tráfico
SOCIAL MEDIA + Analítica Web

51. Una estrategia general:
Diseño Orientado
+ Accesibilidad
+ + = Conversión
Usabilidad + Analítica Web

52. La clave:
+
Atraer Tráfico + +
Conversión
= Éxito Online

53. I.- 10 claves para el éxito de una “web
corporativa”

54. 1.- Préstale la
importancia
que merece Para ver esta pel’cula, debe
disponer de QuickTimeª y de
un descompresor .
• La primera clave es el cariño.
• Una web es un proyecto que
empieza, pero no acaba.
• Dinero y esfuerzo. Más de lo
que parece inicialmente.
• La imagen de la empresa en
juego.

55. 2.- Fijemos los
objetivos de la página
• Información corporativa.
• Información sectorial.
• ¿Venta online?
• ¿Catálogo online amplio o
monoproducto?

56. 3.- La casa en orden:
la estructura web
• Definición de layouts /
wireframes. IMAGEN
• Sitemap / mapa de la web
• Tipo de navegación
• Niveles de navegación

57. 4.- Si queremos que la usen, hagámosla
usable
• El Diseño no es sólo estético.
IMAGEN
• Establecer criterios de
navegación.
• Especialmente importante si
queremos vender online.

58. 5.- Hacer una web fea cuesta casi igual que
una bonita
• La estética tiene una utilidad
funcional. IMAGEN
• La imagen de nuestra
empresa
• Las tendencias existen, como
en la moda, y las webs se
quedan “obsoletas”.
• Ojo con el flash y las webs
sobrecargadas

59. 6.- Buen contenido y bien actualizado
• El contenido es el rey.
IMAGEN
• Actualización periódica de los
contenidos.
• Estilo directo y conciso.
• Uso de contenidos multimedia

60. 7.- Posiciónate en buscadores
• Haciendo una web accesible.
IMAGEN
• Generando buen contenido.
• Relacionándote en el mundo
virtual y físico.
• Consiguiendo enlaces
entrantes.

61. 8.- Publicita tu web a los cuatro vientos
• Alta en buscadores, directorios
locales y sectoriales. IMAGEN
• Contrata campañas de
publicidad CPM.
• Campañas publicidad en
buscadores (SEM)
• Web 2.0 y medios sociales

62. 9.- Medir, medir y volver a medir
• Cuántas visitas, cuántos visitantes
únicos, cuántas páginas vistas. IMAGEN
• Contenido más visto y tasa de
rebote.
• Enlaces entrantes.
• “Keywords” en buscadores.
• Éxito de campañas publicitarias.

63. 10.- Identidad digital: tu imagen en la red.
• Se mezcla la publicidad, la
comunicación y la imagen de IMAGEN
marca.
• Quién eres, quién trabaja en tu
empresa
• Imagen profesional

64. II.- Conceptos de diseño web

65. Arquitectura y usabilidad web

66. • Estructura acorde con los objetivos de la web. La home se
estructura para lograr los objetivos de comunicación: informativos,
comerciales, atención al cliente, producto, etc.
• URLs claras y únicas. Cada página, una URL descriptiva, única y
permanente.
• Información de contacto clara. Destacada y bien ubicada, fácil de
encontrar desde cualquier punto de la web.
• Rótulos significativos y estándar. Las palabras elegidas como menú
de navegación deben ser simples y descriptivas.
• Navegación completa y descriptiva. Donde estás, dónde has
estado, dónde puedes ir. Un sistema de navegación consistente.
Máximo 4 niveles de navegación.
Arquitectura y usabilidad web

67. • Máximo 7 items de navegación.
• Breadcrums o migas de pan o nubes de etiquetas. Muestra el
camino hacia atrás.
• Enlace a la home en el logo. Recurso sencillo para facilitar la vuelta
a la página de inicio.
• Enlace a la página de inicio desde todas las páginas.
• Enlaces claros y bien identificados en todo el site. Con estilo
propio y bien visibles.
• Aprovechar la jerarquía visual para estructurar información.
Estableciendo niveles de importancia del contenido y poniéndolos en
los sitios más visibles.
Arquitectura y usabilidad web (II)

68. • Evitar sobrecarga informativa. No más de 7 ± 2 elementos por
página.
• Ayuda contextual y mensajes de error. Para tareas complejas,
ayudas con globos de texto, información sobre tamaño y formato de
un documento, etc., evitando secciones independientes de ayuda.
• Información de estado. En tareas complejas (como una compra),
informar de dónde se está y lo que falta para terminar.
• Evitar flash innecesario. No usar intros en
flash, no construir páginas completamente
flash. Usar elementos flash para introducir
toques de dinamismo en la web (cabecera,
banners, etc).
Arquitectura y usabilidad web (III)

69. Conversión
vs

70. Diseño gráfico para la web

71. La estética juega un valor importante
en la utilidad de un site.
Está demostrado que un diseño estético
resulta más fácil de usar y fomenta
actitudes positivas

72. • Look & feel adaptado a los objetivos y al sector. Los colores y la
imagen del “site” debe mantener una “mínima” correspondencia con la
actividad de la empresa.
• La cabecera marca la pauta. En términos de estilo, tono, calidad,
actividad de la empresa. Puede llegar a definir el tono cromático del
resto de la web.
• El logotipo de la empresa debe integrarse. En ocasiones se puede
modificar ligeramente en color o forma el logotipo para evitar
disonancias visuales.
• Evitemos ruido visual. Lograr un balance en peso gráfico y en
estructura: estética, contenidos y usabilidad. Ojo con las imágenes de
fondo (sólo en partes externas). Animaciones mínimas.
Diseño gráfico en la web

73. • Jugando con los espacios en blanco. Pueden existir, pero en
Internet tienen un coste mayor. Ayudan en el equilibrio visual.
• La jerarquía visual. El peso gráfico de los elementos debe establecer
una jerarquía según la estructura web. La cabecera, logo y claim
ganan peso, pero podría hacerlo también una imagen de producto.
• Uso tipográfico adecuado. El tamaño, tipo, resaltados, ancho de
línea, alineaciones, etc de los textos son clave para la legibilidad y la
organización de la información. Hacer uso de negritas, cursivas,
titulares para facilitar la lectura.
• Contraste entre fuente y fondo. Buscar un
efecto positivado, de letra oscura sobre fondo
claro.
http://blog.duopixel.com/justified.png
Diseño gráfico en la web (II)

74. • Evitar el sonido ambiental. Salvo que la actividad lo requiera, el
sonido o música no aporta nada. A veces, puede estar incorporado en
un flash. En todo caso, se debe poder apagar el sonido.
• Uso o abuso de ornamentos o recursos gráficos. Pueden aportar
equilibrio, belleza, pero deben usarse adecuadamente. Pueden estar
bajos de tono, no son protagonistas.
• Proporciones de los elementos de la web. En función de la
actividad, el objetivo de la web, el tamaño de la cabecera, por ejemplo,
puede variar.
• La paleta cromática. Definir paletas
cromáticas corporativas y mantener los tonos
en toda la web, incluyendo imágenes,
ilustraciones o fotos en la medida de lo posible.
Diseño gráfico en la web (III)

75. Dominio / URL de la web

76. • Representativo de nuestra empresa. Debe introducir el nombre, o
una de las palabras del nombre o marca. También debería ser
descriptivo de nuestra actividad. Ejemplo: ceramicaslopez.com
• Fácil de recordar. Mejor corto que largo, aunque algunos giros o
expresiones pueden ser llamativos y mnemotécnicos.
• Evitar números y guiones. Para poder decir y deletrear fácilmente el
dominio.
¿Cómo elegir un buen dominio?

77. Contenidos web: texto y multimedia

78. El contenido es el rey.
Un contenido excelente y la frecuencia de
actualización del mismo es un factor
crítico del éxito de una web corporativa.

79. • Estilo de redacción claro y conciso. Escribir de forma simple,
evitando el lenguaje pomposo típico de la comunicación corporativa.
Un mensaje/idea por párrafo. Ojo con los errores gramaticales y
ortográficos.
• Estructura del texto. Ordenar por importancia, resaltar con negritas,
cursivas, viñetas y títulos.
• Imágenes. Usar imágenes (fotos y diagramas) para reforzar las ideas
de forma visual.
• El imparable ascenso del vídeo. Cada vez se usa más el vídeo
(corto y conciso) para explicar una idea o presentar una empresa.
Contenidos web

80. Accesibilidad y maquetación web

81. • Accesibilidad web: Capacidad de acceder a una web y sus
contenidos independientemente de la discapacidad de un usuario o de
su contexto de uso (dispositivos, etc).
– Aumenta el número de visitantes a nuestra web.
– Disminuye los costes de desarrollo.
– Reduce el tiempo de carga de la web.
• XHTML y CSS. Hoy día, casi ya un estándar de maquetación web,
separa los contenidos del diseño, y facilita la accesibilidad.
• ¿Visible en cuántos navegadores? A
principios de 2009, Internet Explorer 6, IE7 y
Firefox tienen un ratio de uso en España de un
4/4/2 aproximadamente.
Accesibilidad web

82. Elementos de posicionamiento (SEO)

83. Posicionamiento buscadores (SEO)
Resultados Orgánicos

84. • Meta tags: para resumir la descripción de la página en buscadores.
• Title: muy importante para el posicionamiento. No más de 7-10
palabras relevantes para la búsqueda. Title único por cada página.
• Keywords: utilizar palabras clave dentro del contenido. Las
keywords de html prácticamente no son usadas por los buscadores.
Usar enlaces internos.
• URL: importancia que sean descriptivas y tengan palabras clave.
• Redundancia: de etiquetas descriptivas en
imágenes, flash y elementos multimedia.
Elementos SEO

85. IV.- Elementos para hacer una web
efectiva

86. • Creando un concepto y una marca. Debe existir una historia, un eje
vertebral.
• Planifica con antelación y ten claros los objetivos, asociando una
estructura a esos objetivos.
• Fomenta la acción. Haz llamadas a la acción, despertando interés
para que el visitante haga click y se mantenga en nuestra página.
• Humaniza la web. No hables mucho de ti, pero si vas a hacerlo, pon
cara al equipo, habla de forma natural. http://www.carbajalyasociados.com/
• Usa un gestor de contenidos, para mantener tu web
permanentemente actualizada.
Consejos para hacer una web efectiva

87. Bola Extra: atraer Tráfico

88. • Tu URL visible en todos sitios. Tienda, folletos, firmas de correo,
etc.
• Directorios locales y sectoriales. Darse de alta no cuesta dinero, y
asegura un cierto tráfico y posicionamiento.
• Date un baño de web 2.0. Leer y conversar en Internet está a la
orden del día. Comenta y firma con enlace a tu web.
• Escribe en tu web. Generando un contenido amplio y profundo que
se indexe en buscadores, y que sea de interés para los visitantes.
• Posiciónate en buscadores. Mediante un
esfuerzo técnico, en contenidos y relaciones
públicas, podrás mejorar poco a poco los
resultados naturales frente a búsquedas clave.
Promoción web en tiempos de crisis

89. • Vigila los metadatos de tu web. Keywords, titles, metatags, etc.
• Haz networking. Para dar a conocer tu negocio y tu web.
• Envía un newsletter a tus socios y conocidos. Estableciendo con
buenos contenidos de utilidad, una relación periódica con ellos.
• Enlaza mucho desde tu web. Para dar a conocer tu sitio y conseguir
que con el tiempo, alguien te devuelva un enlace.
• Genera contenido multimedia y difúndelo.
Fotos, christmas de navidad, un vídeo y
envíalos a los servicios y redes sociales que
existen hoy en Internet.
Promoción web en tiempos de crisis (II)

90. Marketing en buscadores (SEM)

91. Marketing en buscadores y directorios
Enlaces
patrocinados en
buscadores y
comparadores de
precios
Directorios
locales
Directorios
sectoriales

92. Enlaces patrocinados en buscadores
Enlaces Patrocinados

93. Enlaces patrocinados en buscadores
1. Sólo se paga por cada visita recibida: desde 0,01 €/visita
y en función de la competencia.
2. Resultados inmediatos: en menos de 2 días la campaña
está en marcha y se reciben visitas.
3. Planificación y Vigilancia:
Es necesario trabajar las palabras clave compradas, los anuncios dinámicos y el
coste por click.
Puntos clave: presupuesto máximo diario, cpc medio, publicidad contextual,
horarios, concordancia, palabras negativas…
TASA DE CONVERSIÓN

94. Directorios locales
1. Fuente de información para servicios locales: las guías locales en Internet.
2. Posibilidad de contratar posiciones destacadas en los resultados de búsqueda
3. Búsqueda local a través de mapas
4. Ayuda a mejorar nuestro posicionamiento orgánico en buscadores: enlaces.

95. Directorios sectoriales
1. Guías de Servicios especializadas por sector
2. Posibilidad de contratar posiciones publicitarias
3. Ayuda a mejorar nuestro posicionamiento orgánico en buscadores.

96. Email Marketing
- Una técnica de Marketing Online.
Marketing Directo.
- Envío de información comercial
por email
- Permite la segmentación
- Permite la evaluación
“Sé que el 50% de mi gasto en publicidad es inutil. El problema es
que no sé qué 50% es”
E-mail marketing John Wanamaker

97. Dispersión Contenido
- Bidireccional.
Sacar el contenido
del sitio
- No centralizar el
contenido
- Bidireccional.
Traer visitantes al
sitio
- Alcanzar nichos

98. Herramientas y Técnicas

99. Herramientas y Técnicas
- Primera impresión. Five Second Test
- Hábitos de navegación. Eyetracking
- Analítica. G. Analytics, Omniture
- A/B Testing. G. Website Optimizer
-Informe de Marketing en Internet

100. Five Second Test
- Permite
evaluar
bocetos
- Ayuda a
convertir
-www.fivesecondtest.com

101. Eyetracking
- Permite
evaluar
conductas
- Ayuda a
convertir
-http://www.labsmedia.com/clickheat/index.html
- http://www.alt64.com/

102. Eyetracking
- Permite reconstruir patrones
de navegación
- Permite ver atenciones
máximas

103. Eyetracking

104. Eyetracking

105. A/B Testing
- La evaluación
“refinitiva”
- Es iterativo ¿Recordáis la diapositiva 27?
- Es empírico
-http://www.google.com/support/websiteoptimizer/?hl=es
- http://www.wichtestwon.com/

106. A/B Testing
• ¡Ganó esta!
• Generó un 14.9
% más de
registros
• El 49% pensó
que no
• El 49% estaba
equivocado

107. A/B Testing
• Pensar y probar
• Es gratis
• No falla
• Siempre sobre
nuestro target
(es nuestra web!)

108. Informe de Marketing en Internet
• Páginas indexadas
• Posición en buscadores
• Comparativa con competencia
• http://www.vexlan.com/informe-marketing-en-internet

109. Para terminar…

111. “Sé que la mitad de mi gasto publicidad no me aporta beneficios, pero no sé que mitad”
John Wanamaker
Tanto en Diseño Web como en Marketing Online
Planificar y Diseñar o
Evaluar
Definir Ejecutar

112. Gracias,
pedro.gonzalez@domestika.com