Neurona digital.diseño&usabilidad-2011

639 views

Published on

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

Neurona digital.diseño&usabilidad-2011

  1. 1. Layout & Design Eric Castillo @eric_c_castillo eric.c.castillo@gmail.com
  2. 2. Diseño y la disposición de lapágina para mejorar usabilidad
  3. 3. 1. Principios de Diseño Web  La importancia del diseño de la página El diseño de Tiene un efecto 1 2 página es la parte relacionado con inmediatamente la manera en la más visible del que las personas diseño web. juzgarán tu sitio Jakob Nielsen, Designing Web Usability Fundamental para mejorar la usabilidad Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho SL. Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services
  4. 4. 1. Principios de Diseño Web Arquitectura de la información Usabilidad •  Organización de la •  Método de diseño y solución información con el objetivo de de sistemas que toma en permitir al usuario encontrar su cuenta el factor humano. vía de navegación hacia el •  Debe cumplir 3 principios: conocimiento y la comprensión •  Que el usuario encuentre lo de la información 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 SL. Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services
  5. 5. ¿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
  6. 6. ¿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
  7. 7. 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
  8. 8. Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho
  9. 9. 1. Principios de Diseño Web 1) Disposición de la página y el diseño •  Flujo del Ojo y procesamiento de la información •  El establecimiento de una jerarquía visual 2) El uso del espacio de la pantalla •  Dedica más espacio a los contenidos •  Diseño ”above the fold” •  Lugares comunes de elementos de la página 3) Descarga (tiempos de respuesta) Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho SL. Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services
  10. 10. 1. Principios de Diseño Web El flujo del Ojo humano •  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 Duff & puede ser recibida y procesada Mohler •  Flujo del Ojo humano •  El Procesamiento de la información Relación Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho SL. Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services
  11. 11. 1. Principios de Diseño Web El flujo del Ojo humano 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 Colin Wheildon, Type and Layout Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho SL. Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services
  12. 12. 1. Principios de Diseño Web Problemas de lectura en línea 1 2 •  Reducir al mínimo el •  Es más difícil leer movimiento del ojo en •  en línea el diseño de páginas web es aún más importante que en medios impresos 3 4 •  Alrededor del 80% de los •  La atención de usuarios escanear •  usuario es corta páginas Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho SL. Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services
  13. 13. 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 SL. Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services
  14. 14. 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 SL. Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services
  15. 15. 1. Principios de Diseño Web Solución: Reducir el movimiento del ojo •  Los bloques de texto •  Títulos Reconocer •  Imágenes que los •  Usa la prueba elementos de entrecerrar en las los ojos para páginas comprobar su crean diseño de formas página Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho SL. Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services
  16. 16. 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 SL. Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services
  17. 17. 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 SL. Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services
  18. 18. Option 0 Nombre Busqueda Nombre Mini-Descripción (tag line) Cargo Actual Categoría Nombre Temas: Tema 1, Tema 2, Mini-Descripción (tag line) Similares Bio Video Disponibilidad Nombre Mini Descripción (tag line)…….. Mini-Descripción (tag line) …………………………………. ACTUE Experiencia más relevante……… Nombre YA! …………………………………. Mini-Descripción Principal Diferenciador……….. (tag line) ………………………………… Idioma: Idioma 1 Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho
  19. 19. Option 1 Nombre ACTUE Nombre Mini-Descripción YA! Cargo Actual (tag line) Nombre Temas: Tema 1, Tema 2, Busqueda Mini-Descripción (tag line) Bio Video Disponibilidad Nombre Categoría Mini Descripción (tag line)…….. Mini-Descripción (tag line) …………………………………. Similares Experiencia más relevante……… Nombre …………………………………. Mini-Descripción Principal Diferenciador……….. (tag line) ………………………………… Idioma: Idioma 1 Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho
  20. 20. Option 2 Nombre Cargo Actual ACTUE YA! Temas: Tema 1, Tema 2, Bio Video Disponibilidad Busqueda Mini Descripción (tag line)…….. …………………………………. Categoría Experiencia más relevante……… …………………………………. Similares Principal Diferenciador……….. ………………………………… Idioma: Idioma 1 Nombre Nombre Nombre Nombre Mini-Descripción Mini-Descripción Mini-Descripción Mini-Descripción (tag line) (tag line) (tag line) (tag line) Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho
  21. 21. Option 3 Nombre ACTUE Cargo Actual YA! Temas: Tema 1, Tema 2, Busqueda Bio Video Disponibilidad Categoría Mini Descripción (tag line)…….. …………………………………. Experiencia más relevante……… Similares …………………………………. Principal Diferenciador……….. ………………………………… Idioma: Idioma 1 Nombre Nombre Nombre Mini-Descripción Mini-Descripción Mini-Descripción (tag line) (tag line) (tag line) Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho
  22. 22. Option 4 Nombre Cargo Actual Busqueda Temas: Tema 1, Tema 2, Categoría Bio Video Disponibilidad Mini Descripción (tag line)…….. Similares …………………………………. Experiencia más relevante……… …………………………………. Principal Diferenciador……….. ACTUE ………………………………… YA! Idioma: Idioma 1 Nombre Nombre Nombre Mini-Descripción Mini-Descripción Mini-Descripción (tag line) (tag line) (tag line) Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho
  23. 23. Option Home Nuestros Quienes LOGO Servicios Novedades FAQs Speakers Somos Busqueda Algo, Lindo, Categoría Inspirador… … Aquí! Similares ACTUE YA! Nombre Nombre Nombre Mini-Descripción Mini-Descripción Mini-Descripción (tag line) (tag line) (tag line) Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho
  24. 24. 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 SL. Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services
  25. 25. 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 SL. Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services
  26. 26. 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 SL. Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services
  27. 27. 1. Principios de Diseño Web Jerarquía Visual •  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 … 1 •  Steve Krug, Don’t Make Me Think •  Relación entre… •  Colocación de los objetos en la página y 2 •  Procesamiento de la información Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho SL. Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services
  28. 28. 1. Principios de Diseño Web Solución: Mostrar importancia y prioridad Hacer los elementos importantes más grandes, más marcados Posicionar elementos importantes más cerca de la parte superior de la página Usa un color más fuerte para los elementos importantes Utiliza los espacios en blanco alrededor de los elementos que quieren destacar Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho SL. Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services
  29. 29. 1. Principios de Diseño Web Solución: Mostrar importancia y prioridad Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho SL. Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services
  30. 30. 1. Principios de Diseño Web Solución: Ayudar a escanear y compensión Brindar alivio visual de densas manchas de texto Utilice cabeceras significativa y sub cabeceras Cree listas y series en viñetas Hacer hincapié en las palabras clave o frases dentro de los párrafos Crear contrastes entre elementos de la página Presente contenido adecuado en forma de tablas, gráficas, tablas, imágenes Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho
  31. 31. 1. Principios de Diseño Web El uso del espacio de la pantalla •  Así, la primer regla de la utilización de 2 espacio en pantalla es: •  Dedicar la mayor parte del espacio de la pantalla al contenido •  Diseñar above the fold •  Evitar Scroll vertical y 1 horizontal Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho SL. Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services
  32. 32. 1. Principios de Diseño Web Solución: El uso adecuado del espacio Existen algunas convenciones de diseño Ubicar el logotipo Utilizar el logo Ubicar menú en la parte superior y/o arriba, izquierda como acceso al izquierda o derecha home El uso del links en los El uso del menú a la textos, aparte de los derecha ha ido botones ha ido aumentando disminuyendo Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho SL. Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services
  33. 33. 1. Principios de Diseño Web Solución: El uso adecuado del espacio Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho
  34. 34. 1. Principios de Diseño Web Solución: El uso adecuado del espacio Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho
  35. 35. Solución: El uso adecuado del espacio AQUI!! Espacio a lo que Corresponde Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho
  36. 36. 1. Principios de Diseño Web Tiempos de descarga Los estudios demuestran que •  1 segundo es el límite de tiempo Por lo tanto se requieren para tener respuesta páginas de un peso •  10 segundos para perder a un aproximado de 34Kb usuario Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho SL. Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services
  37. 37. 1. Principios de Diseño WebEjemplo  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 SL. Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services
  38. 38. 1. Principios de Diseño Web ESPACIO  DEDICADO   AREAS  DE   TIEMPO  DE   AL  OBJETIVO   OPORTUNIDAD  PARA   RESPUESTA:  1  SEG   PRINCIPAL  DEL  SITIO:   UN  SITIO  WEB: DEFINIR  OBJETIVO   JERARQUÍA  VISUAL  DE   DEFINICIÓN  Y   CONTENIDOS:     DEFINIR  PUNTO  DE   UBICACIÓN  DE  MENÚ   TAMAÑOS  DE  TEXTOS   ANCLA   E  HIPERVÍCUNLOS   E  IMÁGENES,  COLOR   DEFINIR  ESPACIO   OTORGAR  DATOS   PARA  EL  CALL  TO   SUFICIENTES  PARA  UN   ACTION   SCANNING  COMPLETO   Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho SL. Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services
  39. 39. Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho
  40. 40. Planificación y administracióndel desarrollo de sitios web Eric Castillo/Karla López Torres / T2O media Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho
  41. 41. 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 SL. Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services
  42. 42. 1. Planificación de un Sitio Web 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   Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho SL. Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services
  43. 43. 1. Planificación de un Sitio Web 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.   Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho SL. Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services
  44. 44. 1. Planificación de un Sitio Web 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.   Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho SL. Este es un documento confidencial. Copyright © 2004-2010 T2O AdMedia Services

×