neurona digital.diseño&usabilidad-2011
DESCRIPTION
TRANSCRIPT
Diseño y la disposición de la página para mejorar usabilidad
Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services SL.
1. Principios de Diseño Web
1 El diseño de página es la parte inmediatamente más visible del diseño web. Jakob Nielsen, Designing Web Usability
2 Tiene un efecto relacionado con la manera en la que las personas juzgarán tu sitio Fundamental para mejorar la usabilidad
La importancia del diseño de la página
Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services SL.
1. Principios de Diseño Web
Arquitectura de la información
• Organización de la información con el objetivo de permitir al usuario encontrar su vía de navegación hacia el conocimiento y la comprensión de la información
Usabilidad
• Método de diseño y solución de sistemas que toma en cuenta el factor humano.
• Debe cumplir 3 principios: • Que el usuario encuentre lo
que busca • Que lo encuentre fácilmente • Que se le muestre la forma
de llegar rápidamente a la información que le interesa
Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho
¿Cuál es el propósito de tu sitio web? – Awareness – Educar – Generar una acción
• Llamadas a Call Center • Llamadas de Call me back • Generar visitas a Piso • Vender • Generar Subscriptores • Generar Registros • Generar prospectos • Generar tráfico y revender a CPM
¿Qué es entonces?
Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho
¿Y entonces… Cómo alineamos nuestra Estrategia digia? – Contenido es Rey!! – Sitio Web – SEM – SEO – Permission Marketing – Afiliación/Redes de Contenido – Social Media – Plataformas móviles, apps, etc.
Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho
Y si el contenido es Rey ¿Dónde vive el Rey? – Micro Sitios – Landing Pages – Blogs – Canales de Video (YT Channlel) – Facabook Page
• Facebook FBML – Twitter Home Page – Mobile Site Nothing like Home!
Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho
Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services SL.
1. Principios de Diseño Web
• Flujo del Ojo y procesamiento de la información • El establecimiento de una jerarquía visual
1) Disposición de la página y el diseño
• Dedica más espacio a los contenidos • Diseño ”above the fold” • Lugares comunes de elementos de la página
2) El uso del espacio de la pantalla
3) Descarga (tiempos de respuesta)
Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services SL.
1. Principios de Diseño Web
El flujo del Ojo humano
Duff & Mohler
• El buen diseño se basa en el flujo de los ojos. Entre más movimiento de los ojos es requeridos en un campo visual, menos información la que puede ser recibida y procesada
Relación
• Flujo del Ojo humano • El Procesamiento de la información
Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services SL.
1. Principios de Diseño Web
El flujo del Ojo humano
Colin Wheildon, Type and Layout
El movimiento es de la Zona óptica Primaria al Anclaje
Terminal
Líneas onduladas indican el movimiento que el ojo resiste
naturalmente
Las cruces son las zonas muertas en la página / pantalla
Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services SL.
1. Principios de Diseño Web
Problemas de lectura en línea
1 • Reducir al mínimo el
movimiento del ojo en el diseño de páginas web es aún más importante que en medios impresos
2 • Es más difícil leer • en línea
3 • Alrededor del 80% de los
usuarios escanear páginas
4 • La atención de • usuario es corta
Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services SL.
1. Principios de Diseño Web
Solución: Reducir el movimiento del ojo
1) No objetos importantes, distractores o que capturen la
atención de los ojos en las áreas de la pantalla que provoca la resistencia del movimiento del ojo – Arriba a la derecha – Abajo a la izquierda
Un elemento atractivo a primera vista (eye catching) podría hacer que los usuarios se pierda del contenido importante
Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services SL.
1. Principios de Diseño Web
Solución: Reducir el movimiento del ojo
1)
Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services SL.
1. Principios de Diseño Web
Solución: Reducir el movimiento del ojo
Reconocer
que los elementos
en las páginas crean formas
• Los bloques de texto
• Títulos • Imágenes • Usa la prueba
de entrecerrar los ojos para comprobar su diseño de página
Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services SL.
1. Principios de Diseño Web
Solución: Reducir el movimiento del ojo
3) Diseñar una parrilla imaginaria
Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services SL.
1. Principios de Diseño Web
Solución: Reducir el movimiento del ojo 3) Diseñar una parrilla imaginaria: Propuestas de Diagramación
Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho
Option 0
Nombre Cargo Actual
Temas: Tema 1, Tema 2,
Mini Descripción (tag line)…….. …………………………………. Experiencia más relevante……… …………………………………. Principal Diferenciador………..
………………………………… Idioma: Idioma 1
Nombre Mini-Descripción (tag line)
Nombre Mini-Descripción (tag line)
Nombre Mini-Descripción (tag line)
Nombre Mini-Descripción (tag line)
Busqueda
Categoría
Video Bio Disponibilidad Similares
ACTUE YA!
Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho
Option 1
Nombre Cargo Actual
Temas: Tema 1, Tema 2,
Mini Descripción (tag line)…….. …………………………………. Experiencia más relevante……… …………………………………. Principal Diferenciador………..
………………………………… Idioma: Idioma 1
Nombre Mini-Descripción (tag line)
Nombre Mini-Descripción (tag line)
Nombre Mini-Descripción (tag line)
Nombre Mini-Descripción (tag line)
Busqueda
Categoría Video Bio Disponibilidad
Similares
ACTUE YA!
Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho
Option 2
Nombre Cargo Actual
Temas: Tema 1, Tema 2,
Mini Descripción (tag line)…….. …………………………………. Experiencia más relevante……… …………………………………. Principal Diferenciador………..
………………………………… Idioma: Idioma 1
Nombre Mini-Descripción (tag line)
Busqueda
Categoría
Video Bio Disponibilidad
Similares
ACTUE YA!
Nombre Mini-Descripción (tag line)
Nombre Mini-Descripción (tag line)
Nombre Mini-Descripción (tag line)
Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho
Option 3
Nombre Cargo Actual
Temas: Tema 1, Tema 2,
Mini Descripción (tag line)…….. …………………………………. Experiencia más relevante……… …………………………………. Principal Diferenciador………..
………………………………… Idioma: Idioma 1
Nombre Mini-Descripción (tag line)
Busqueda
Categoría Video Bio Disponibilidad
Similares
ACTUE YA!
Nombre Mini-Descripción (tag line)
Nombre Mini-Descripción (tag line)
Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho
Option 4
Nombre Cargo Actual
Temas: Tema 1, Tema 2,
Mini Descripción (tag line)…….. …………………………………. Experiencia más relevante……… …………………………………. Principal Diferenciador………..
………………………………… Idioma: Idioma 1
Nombre Mini-Descripción (tag line)
Busqueda
Categoría Video Bio Disponibilidad
Similares
ACTUE YA!
Nombre Mini-Descripción (tag line)
Nombre Mini-Descripción (tag line)
Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho
Option Home
Algo, Lindo, Inspirador… … Aquí!
Nombre Mini-Descripción (tag line)
Busqueda
Categoría
Similares
ACTUE YA!
Nombre Mini-Descripción (tag line)
Nombre Mini-Descripción (tag line)
Nuestros Speakers Servicios Novedades FAQs Quienes
Somos LOGO
Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services SL.
1. Principios de Diseño Web
Solución: Reducir el movimiento del ojo
4) Hacer el tamaño uniforme en todas las imágenes*
Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services SL.
1. Principios de Diseño Web
Solución: Reducir el movimiento del ojo
4) Hacer el tamaño uniforme en todas las imágenes*
Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services SL.
1. Principios de Diseño Web
Solución: Reducir el movimiento del ojo 5) Usa alineación a la izquierda para el texto y títulos
Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services SL.
1. Principios de Diseño Web
Jerarquía Visual
1
• Una de las mejores maneras de hacer una página fácil de entender cuando se lee con prisas es asegurarse de la apariencia de las cosas en la página ... de manera clara y precisa retrata... cuáles cosas están relacionadas y cuáles cosas son parte de otras cosas …
• Steve Krug, Don’t Make Me Think
2 • Relación entre… • Colocación de los objetos en la página y • Procesamiento de la información
Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services SL.
1. Principios de Diseño Web
Solución: Mostrar importancia y prioridad
Utiliza los espacios en blanco alrededor de los elementos que quieren destacar
Usa un color más fuerte para los elementos importantes
Posicionar elementos importantes más cerca de la parte superior de la página
Hacer los elementos importantes más grandes, más marcados
Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services SL.
1. Principios de Diseño Web
Solución: Mostrar importancia y prioridad
Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho
1. Principios de Diseño Web
Solución: Ayudar a escanear y compensión
Presente contenido adecuado en forma de tablas, gráficas, tablas, imágenes
Crear contrastes entre elementos de la página
Hacer hincapié en las palabras clave o frases dentro de los párrafos
Cree listas y series en viñetas
Utilice cabeceras significativa y sub cabeceras
Brindar alivio visual de densas manchas de texto
Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services SL.
1. Principios de Diseño Web
El uso del espacio de la pantalla
• Así, la primer regla de la utilización de espacio en pantalla es:
1
• Dedicar la mayor parte del espacio de la pantalla al contenido
• Diseñar above the fold • Evitar Scroll vertical y
horizontal
2
Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services SL.
1. Principios de Diseño Web
Solución: El uso adecuado del espacio
Existen algunas convenciones de diseño
Ubicar el logotipo arriba, izquierda
o derecha
Utilizar el logo como acceso al
home Ubicar menú en la parte superior y/o
izquierda
El uso del menú a la derecha ha ido aumentando
El uso del links en los textos, aparte de los
botones ha ido disminuyendo
Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho
1. Principios de Diseño Web
Solución: El uso adecuado del espacio
Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho
1. Principios de Diseño Web
Solución: El uso adecuado del espacio
Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho
Espacio a lo que Corresponde
AQUI!!
Solución: El uso adecuado del espacio
Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services SL.
1. Principios de Diseño Web
Tiempos de descarga
Los estudios demuestran que • 1 segundo es el límite de tiempo
para tener respuesta • 10 segundos para perder a un
usuario
Por lo tanto se requieren páginas de un peso
aproximado de 34Kb
Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services SL.
1. Principios de Diseño Web
Ejemplo de Estructura: Jerarquización Visual de contenidos Definición del punto de ancla Información relevante above the fold
Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services SL.
1. Principios de Diseño Web
AREAS DE OPORTUNIDAD PARA
UN SITIO WEB: TIEMPO DE
RESPUESTA: 1 SEG
ESPACIO DEDICADO AL OBJETIVO
PRINCIPAL DEL SITIO: DEFINIR OBJETIVO
JERARQUÍA VISUAL DE CONTENIDOS:
TAMAÑOS DE TEXTOS E IMÁGENES, COLOR
DEFINICIÓN Y UBICACIÓN DE MENÚ E HIPERVÍCUNLOS
DEFINIR PUNTO DE ANCLA
DEFINIR ESPACIO PARA EL CALL TO
ACTION
OTORGAR DATOS SUFICIENTES PARA UN SCANNING COMPLETO
Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho
Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho
Planificación y administración del desarrollo de sitios web
Eric Castillo/Karla López Torres / T2O media
Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services SL.
1. Planificación de un Sitio Web
Para lanzar un sitio web con éxito es esencial contar con un equipo de personas capacitadas. Es un esfuerzo temporal realizado para crear un producto o servicio único.
Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services SL.
Mapa de Sitio Es un grafico que significa la mejor forma de representación de un sitio web. Se muestran las diferentes secciones, enlaces entre páginas y su relación con la página inicial Está directamente relacionado con la organización de contenidos
1. Planificación de un Sitio Web
Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services SL.
Establecer calendario de trabajo Garantiza los plazos de entrega del proyecto y la fecha de lanzamiento. Recomendaciones • Dividirlo en bloques semanales • Establecer los plazos de entrega de información.
1. Planificación de un Sitio Web
Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services SL.
Periodo de pruebas Realizar pruebas (testing completo) Todos los responsables colaboran en esta fase Considerar para las pruebas a personas no relacionadas al proyecto para obtener puntos de vista más objetivos y críticos.
1. Planificación de un Sitio Web