Neurona digital.diseño&usabilidad-2011

Layout & Design

Eric Castillo
@eric_c_castillo
eric.c.castillo@gmail.com

Diseño y la disposición de la
pá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


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


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


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!



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)



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



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



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



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)




•  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




3) Diseñar
una parrilla
imaginaria




3) Diseñar una parrilla imaginaria: Propuestas de Diagramación


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


Option 1

Nombre
ACTUE Nombre Mini-Descripción
YA! Cargo Actual
(tag line)

Nombre
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


Option 2
Nombre
Cargo Actual ACTUE
YA!

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)


Option 3
Nombre
ACTUE
Cargo Actual
YA!
Busqueda
Bio Video Disponibilidad

Categoría Mini Descripción (tag line)……..
………………………………….
Similares
………………………………….
Principal Diferenciador………..
…………………………………
Idioma: Idioma 1

Nombre Nombre Nombre
Mini-Descripción Mini-Descripción Mini-Descripción
(tag line) (tag line) (tag line)


Option 4
Nombre
Cargo Actual
Busqueda
Categoría
Bio Video Disponibilidad

Mini Descripción (tag line)…….. Similares
………………………………….
………………………………….
Principal Diferenciador……….. ACTUE
………………………………… YA!
Idioma: Idioma 1



Option Home
Nuestros Quienes
LOGO Servicios Novedades FAQs
Speakers Somos

Busqueda
Algo,
Lindo, Categoría
Inspirador…
… Aquí! Similares

ACTUE
YA!





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



5) Usa alineación a la izquierda para el texto y títulos



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



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



Solución: Mostrar importancia y prioridad



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



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



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



AQUI!!

Espacio a lo que Corresponde



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



Ejemplo
de

Estructura:

Jerarquización

Visual

de
contenidos

Deﬁnición
del
punto

de
ancla

Información

relevante
above
the

fold



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


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

Recomendados

Recomendados

Más contenido relacionado

Similar a Neurona digital.diseño&usabilidad-2011

Similar a Neurona digital.diseño&usabilidad-2011 (20)

Último

Último (20)

Neurona digital.diseño&usabilidad-2011