Claves de éxito de una web corporativa [email protected] Enero 2009 domestika.com Índice Algunos datos Radiografía del éxito de una web intro 10 claves arquitectura diseño gráfico Conceptos de diseño web: diseño gráfico, arquitectura de información y usabilidad, contenidos, maquetación y accesibilidad. Recomendaciones básicas conceptos diseño web dominio / URL contenidos accesibilidad SEO elementos básicos web efectiva promoción web Difundiendo la buena nueva: marketing online, posicionamiento y publicidad en buscadores, email marketing, social media. domestika.com marketing online SEO SEM email mkt medios sociales 0.- Situación Actual domestika.com Millones de Internautas en España 22 mill. 22 millones de personas han entrado en el último mes en Internet. (Fuente: Red.es) domestika.com Uso de los buscadores en Internet 93% 72,8% Los buscadores son la herramienta más utilizada en internet (93%). Muy por delante del resto de servicios. El 72,8% de los internautas encuentra información de compra o contratación en los buscadores. (1) Fuente: EGM. Olas domestika.com (2) Fuente: Estudio sobre Comercio Electrónico B2C 2007 (Red.es / AECE-FECEMD, julio 2005) Uso de la web corporativa en España 10% Porcentaje de empresas españolas con menos de diez empleados que disponen de web corporativa. 46% Porcentaje de empresas españolas con más de diez empleados que disponen de web corporativa. Fuente: INE, enero 2008 domestika.com I.- 10 claves para el éxito de una “web corporativa” domestika.com 1.- Préstale la importancia que merece • 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. domestika.com PÁGINA WEB 2.- Fijemos los objetivos de la página • Información corporativa. • Información sectorial. • ¿Venta online? • ¿Catálogo online amplio o monoproducto? domestika.com 3.- La casa en orden: la estructura web • Definición de layouts / wireframes. • Sitemap / mapa de la web • Tipo de navegación • Niveles de navegación domestika.com IMAGEN 4.- Si queremos que la usen, hagámosla usable • El Diseño no es sólo estético. • Establecer criterios de navegación. • Especialmente importante si queremos vender online. domestika.com IMAGEN 5.- Hacer una web fea cuesta casi igual que una bonita • La estética tiene una utilidad funcional. • 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 domestika.com IMAGEN 6.- Buen contenido y bien actualizado • El contenido es el rey. • Actualización periódica de los contenidos. • Estilo directo y conciso. • Uso de contenidos multimedia domestika.com IMAGEN 7.- Posiciónate en buscadores • Haciendo una web accesible. • Generando buen contenido. • Relacionándote en el mundo virtual y físico. • Consiguiendo enlaces entrantes. domestika.com IMAGEN 8.- Publicita tu web a los cuatro vientos • Alta en buscadores, directorios locales y sectoriales. • Contrata campañas de publicidad CPM. • Campañas publicidad en buscadores (SEM) • Web 2.0 y medios sociales domestika.com IMAGEN 9.- Medir, medir y volver a medir • Cuántas visitas, cuántos visitantes únicos, cuántas páginas vistas. • Contenido más visto y tasa de rebote. • Enlaces entrantes. • “Keywords” en buscadores. • Éxito de campañas publicitarias. domestika.com IMAGEN 10.- Identidad digital: tu imagen en la red. • Se mezcla la publicidad, la comunicación y la imagen de marca. • Quién eres, quién trabaja en tu empresa • Imagen profesional domestika.com IMAGEN II.- Conceptos de diseño web domestika.com Arquitectura y usabilidad web domestika.com Arquitectura y usabilidad web • 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. domestika.com Arquitectura y usabilidad web (II) • Máximo 7 items de navegación. • Breadcrums o migas de pan. 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. domestika.com Arquitectura y usabilidad web (III) • 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). domestika.com Diseño gráfico para la web domestika.com 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 domestika.com Diseño gráfico en la web • 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. domestika.com Diseño gráfico en la web (II) • 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. domestika.com Diseño gráfico en la web (III) • Evitar el sonido ambiental. Salvo que la actividad lo requiera, el sonido o música en 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. domestika.com Dominio / URL de la web domestika.com ¿Cómo elegir un buen dominio? • 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. domestika.com