Aspectos

esenciales

en el

DISEÑO

DE PÁGINAS

WEB Marta Moreno – digital

communications and social media

@martaymore

INTRO Una página web es el escaparate de nuestro negocio y una

herramienta para conectar con nuestro público (clientes)

Diseño acorde a nuestra imagen corporativa y

línea de negocio

Funcionalidades que aporten valor

¿necesito un ferrari?

Optimizada para buscadores… si no, es

predicar en el desierto

El contenido es el rey, y cada vez más

¿qué vas a publicar?

Conectada a redes sociales y presencia

online de la marca

Qué nos espera hoy? En las próximas dos horas

cubriremos los siguientes temas.

INTERFAZ

DEL USUARIO

1 … Navegación y uso

2 … Arquitectura de la

información

3 … Usabilidad

4 … Accesibilidad

5 … Folcsonomías – >

etiquetado

DISEÑO 6 … Blueprint* ANALÍTICA WEB Y MÉTRICAS 7 … Qué medir 8 … Googgle Analytics

TÉCNICAS DE OPTIMIZACIÓN 9 … SEO “basics”

* Otros aspectos del diseño ya tratados en otro taller

PRÁCTICA • Crear una web básica • Insertar widgets: - Google Maps - Botones sociales • Embeber contenidos: - Vídeos - Podcasts • Google Analytics en tu web • Alta en Google Index

WEB

Os vamos a mostrar cuáles son los aspectos fundamentales a la hora de

diseñar u optimizar vuestra página web. La corta duración de este taller

no permite profundizar en cada uno de estos elementos pero intentaremos

que al finalizar el taller sepáis qué importancia tiene cada uno de ellos.

Qué elementos formales debes tener

en cuenta a la hora de diseñar una

página web.

INTERFAZ DEL Navegación y uso

El diseño de la página web se realiza teniendo en cuenta el tipo de página y la navegación que mejor se adapta a nuestros contenidos.

1

TIPOLOGÍA DE WEBSITES

1 … Corporativo (indra.es, endesa.es).

2 … e-commerce (Amazon).

3 … colaborativo (WikiS).

4 … herramientas (buscadores, fotos, mapas, etc.).

5 … campañas online (El almacén de la ilusión –de Coca Cola–)

5 … transacciones (banca online)

6 … noticias (lainformacion.com, el pais.com)

7 … Microsites (p.ej. de libros concretos

“Portal web

vs

website”

Arquitectura de la información disciplina encargada del estudio, análisis, organización, disposición y estructuración de la información en espacios de información, y de la selección y presentación de los datos en los sistemas interactivos y no interactivos

Objetivo: organizar los patrones inherentes en los datos, haciendo clara la

complejidad..

2

ASPECTOS BÁSICOS

1 … Establecer la misión y la visión del sitio

2 … Determinar el contenido informativo y las

funcionalidades técnicas

3 … Definir la forma y los medios mediante los cuales

los usuarios encontrarán y accederán a la información

contenida en el website

4 … Establecer los medios y vías para permitir el

crecimiento y desarrollo futuro

INTERFAZ DEL

Usabilidad el atributo de calidad que mide lo fáciles que son de usar las interfaces Web” Jakob Nielsen

Objetivo: que los usuarios puedan interactuar de la forma más fácil, cómoda e intuitiva, de forma que no exista, o exista el menor esfuerzo de aprendizaje posible

3

¿Quieres saber más?

10 reglas de usabilidad de

Jakob Nielsen

una docena de… consejos

sobre usabilidad

QUÉ ANALIZAR

1 … Respeto a los estándares web

2 … Ergonomía cognitiva y usos comunes en internet

3 … Aspectos físicos de la legibilidad y percepción en una pantalla

4 … Interfaz de usuario

5 … Rotulación y ayudas a la navegación

INTERFAZ DEL

Accesibilidad acceso a la información independientemente del tipo de hardware, software, infraestructura de red, idioma, cultura, localización geográfica y capacidades de los usuarios.

Objetivo: que cualquier usuario pueda acceder a la información.

4

ES BUENO SABER

1 … Mucho que ver con la programación

2… Tres niveles de accesibilidad

3…. Herramientas gratuitas de verificación

http://www.tawdis.net/taw3/cms/es

http://validator.w3.org

INTERFAZ DEL

Folcsonomías la clasificación colaborativa por medio de etiquetas simples en un espacio de nombres llano, sin jerarquías ni relaciones de parentesco predeterminadas

Objetivos: que los usuarios tengan la posibilidad de utilizar etiquetas y acceder al contenido a través de las etiquetas utilizadas.

5

ASPECTOS BÁSICOS

1 … El etiquetado de contenidos favorece su indexación por buscadores

2 …Facilita al usuario encontrar lo que busca

3 … Todo el contenido debe estar etiquetado

4… Las nubes de etiquetas ayudan al usuario

Etiqueta Conceptos, temas o cuestiones

sobre los que trata el contenido

Categoría Temática que engloba el

contenido

INTERFAZ DEL

Blueprint también conocido como wireframe o diagrama de contenido. Es una representación esquemática de una página web con elementos gráficos que muestran el contenido y comportamiento de las páginas

6

DISEÑO WEB

7

ANALÍTICA WEB Analítica web Nos permite conocer el comportamiento de los usuarios en nuestra web y aplicar mejoras

MÉTRICAS

1 … Visitas: visitantes únicos y nuevos, páginas visitadas, …

2 … Variable Tiempo

3 … Fuentes de Tráfico: directo, buscadores, enlaces, de pago

4 … Tasa de Rebote

5 … Tasa de Conversión

8

ANALÍTICA WEB Google Analytics es un servicio gratuito de estadísticas de sitios web

https://www.google.com/analytics

9

POSICIONAMIENTO Posicionamiento SEO Search engine optimization o dicho en otras palabras optimización para buscadores. También se llama posicionamiento natural.

… Accesibilidad y

compatibilidad para

buscadores, indexabilidad: facilitar la labor de rastreo a las

arañas de los buscadores

Optimización de factores: Interactuar con factores bien

ponderados por algoritmos de

posicionamiento

Relevancia y popularidad: contenidos de alta calidad y

captación de enlaces entrantes

posicionamiento optimizado en buscadores

POSICIONAMIENTO

Arquitectura, diseño, usabilidad son importantes para el SEO

A PASARLO BIEN. Con las manos en la masa… la mejor manera de aprender

HEMOS APRENDIDO

El usuario es el que manda.

La usabilidad es un aspecto clave.

Medir sí o sí.

Aspectos básicos del posicionamiento.

El contenido es el rey.

Esta presentación no

pretende ser un estudio

exhastivo sobre los distintos

aspectos del diseño de

páginas web!

El objetivo es que aporte una

pincelada que os ayude a

entender la importancia de

cada fase en el uso futuro de

la web.

¿Os ha resultado útil?

… y

LISTOS!

BY MARTA.

@martaymore