Neurona digital.diseño&usabilidad-2011
Upcoming SlideShare
Loading in...5
×
 

Neurona digital.diseño&usabilidad-2011

on

  • 620 views

 

Statistics

Views

Total Views
620
Views on SlideShare
620
Embed Views
0

Actions

Likes
0
Downloads
16
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Neurona digital.diseño&usabilidad-2011 Neurona digital.diseño&usabilidad-2011 Presentation Transcript

  • Layout & Design Eric Castillo @eric_c_castillo eric.c.castillo@gmail.com
  • Diseño y la disposición de lapágina para mejorar usabilidad
  • 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
  • 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
  • ¿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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • Solución: El uso adecuado del espacio AQUI!! Espacio a lo que Corresponde Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho
  • 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
  • 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
  • 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
  • Este es un documento confidencial. Copyright © 2004-2010 Eric Castillo Camacho
  • 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
  • 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
  • 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
  • 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
  • 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