Neurona digital.diseño&usabilidad-2011

Layout & Design

Eric Castillo

@eric_c_castillo [email protected]

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



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?


¿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.


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!



•  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)



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



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



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



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




1)




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




3) Diseñar una parrilla imaginaria



Solución: Reducir el movimiento del ojo 3) Diseñar una parrilla imaginaria: Propuestas de Diagramación


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)




Busqueda

Categoría

Video Bio Disponibilidad Similares

ACTUE YA!


Option 1

Nombre Cargo Actual








Busqueda

Categoría Video Bio Disponibilidad

Similares

ACTUE YA!


Option 2

Nombre Cargo Actual





Busqueda

Categoría

Video Bio Disponibilidad

Similares

ACTUE YA!





Option 3

Nombre Cargo Actual





Busqueda


Similares

ACTUE YA!




Option 4

Nombre Cargo Actual





Busqueda


Similares

ACTUE YA!




Option Home

Algo, Lindo, Inspirador… … Aquí!


Busqueda

Categoría

Similares

ACTUE YA!



Nuestros Speakers Servicios Novedades FAQs Quienes

Somos LOGO




4) Hacer el tamaño uniforme en todas las imágenes*



Solución: Reducir el movimiento del ojo 5) Usa alineación a la izquierda para el texto y títulos



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



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



Solución: Mostrar importancia y prioridad



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



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



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


Espacio a lo que Corresponde

AQUI!!




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



Ejemplo de Estructura: Jerarquización Visual de contenidos Definición del punto de ancla Información relevante above the fold



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


Planificación y administración del desarrollo de sitios web

Eric Castillo/Karla López Torres / T2O media


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.


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



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.



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.


Neurona digital.diseño&usabilidad-2011

Technology

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