la web

La WEB desde la GráficaDiseñando para WEB

María Claudia Posadas (Maclau)_Director de ArteCamilo Iturra_Director GeneralWikot Technologies

WEB=MEDIO

El público objetivo se convierte en un usuario, el cual no solo va a observar el diseño de un sitio si no que va a interactuar con el.

CARACTERISTICAS DEL MEDIO• Comunicación Global• Conexiones Remotas y Tiempo de Carga• Variedad de usuarios (étnicas u culturales)• Usuarios expertos y novatos comparten el mismo espacio• Rápida evolución de las tecnologías• Puntos de entrada desconocidos• Fronteras difusas• Importancia de la primera impresión• La página como unidad• Variedad de plataformas• Posibilidad de desarrollo y mantenimiento descentralizado• Ausencia de estándares en general (estamos cambiando)

LINEAMIENTOS GENERALES1. Hipertexto e Hipermedia2. Contenido3. Navegación4. Imágenes5. Fondos y colores6. Animación7. Mapas

LINEAMIENTOS GENERALES1. Hipertexto e Hipermedia• Dividir la información en trozos asegurando que la estructura principal se coloque en primer lugar• No crear enlaces a páginas con poca información o información irrelevante• Establecer claras relaciones entre páginas enlazadas• Enlaces con etiquetas que indiquen el destino (no en los casos obvios)• Asegurar la simplicidad de navegación• Consistencia en forma y color• Es necesario ser cuidadosos para no caer en un Hipercaos: demasiados enlaces, cadenas de enlaces muy largas para ubicar información relevante, etc.

LINEAMIENTOS GENERALES2. Contenido• Establecer un balance entre el contenido y la apariencia• Secuencia, agrupamiento y énfasis de la información• Uso apropiado de hiperenlaces y señales visuales con propósitos definidos• Los títulos deben ser descriptivos y el texto fácil de comprender• Los elementos relevantes al tope de la página• Considerar posición de los elementos en la pantalla, cantidad de información y de hiperenlaces, señales visuales, color, texto.

LINEAMIENTOS GENERALES3. NavegaciónPara navegar exitosamente el usuario debe ser capaz de responder las siguientes preguntas:• ¿Dónde estoy?• ¿De dónde vengo?• ¿A dónde puedo ir?• ¿Qué puedo hacer aquí?• ¿Cómo llegué aquí?• ¿Cómo puedo ir allá?

LINEAMIENTOS GENERALES3. NavegaciónCada página debe mostrar al usuario, de una forma consistente:• dónde se encuentra (títulos, encabezados o imágenes)• cómo puede avanzar (marcas de texto, enlaces, listas históricas, subtítulos)• qué puede hacer y cómo puede hacerlo (textos, imágenes, menús)

LINEAMIENTOS GENERALES4. Imágenes• Mantener consistencia en el uso de imágenes dentro del sitio Web• Establecer el tamaño de las imágenes de acuerdo a su tiempo de carga

LINEAMIENTOS GENERALES5. Fondos y colores• Debe existir suficiente contraste de colores con el texto• Limitar el número de colores en una página y en un sitio Web o usarlos consistentemente

LINEAMIENTOS GENERALES6. Animación• Debe evitarse en páginas con mucho contenido• Se debe proveer una opción para detener el movimiento si este es muy largo

LINEAMIENTOS GENERALES7. Mapas• Los mapas deben facilitar la navegación en el sitio Web.• En general se aplican los mismos lineamientos que en el caso de imágenes.

LINEAMIENTO ≠ DOGMA

DISEÑANDO SEGÚN LA OCASIÓN

Tipos de Site:

Contenido (informativo)E-CommercePromocional

...entre otros

Contenido (informativo)

www.el-nacional.com www.bbcnews.com www.elpais.es

Contenido (informativo)Contenido: Una buena escritura es el corazón de un sitio de contenido, pero el contenido debe estar muy claro y ser lo más directo para sus usuarios. La misma cantidad y distribución del texto que se utiliza en un impreso no funcionaría en la Web.Navegación: Debe ser intuitiva.Búsqueda: Debe ser efectiva.Estética: Se debe adaptar el diseño al estilo del contenido del sitio, sin opacar al mismo.Nuevas Tecnologías: La mayoría de los sitios de contenido deben ser accesibles el 90% de la audiencia, pero películas de FLASH y desarrollos por el estilo pueden ser utilizados a manera de experimentación ó siempre advirtiendo de su uso al usuario.

E-Commerce

www.amazon.com www.victoriassecret.com www.materialkit.com

E-CommerceNavegación: Esencial sobretodo si el sitio ofrece gran variedad de productos.Búsqueda: ¡Importante!, Un buen diseñador de e-commerce debe entrar en la cabeza del usuario para así determinar como crear excelentes opciones de búsqueda para los potenciales compradores.Estética: El diseño debe mantenerse enfocado en el producto. Los elementos del sitio deben incluir herramientas de ayuda para que el usuario pueda acceder a cualquier producto dentro del sitio.Contenido: El texto debe ser reducido pero muy informativo.Nuevas Tecnologías: Deja estas herramientas para los programadores que desarrollan el backend.

Promocional

www.saintsandsoldiers.com www.startwars.com off line

PromocionalEstética: Esencial, usa el diseño para crear una atmósfera que le indique al usuario sobre el contenido de sitio.Nuevas Tecnologías: Mientras mas pequeña y tecnológicamente sofisticada es el target de usuarios, mas arriesgado puede ser el diseño del sitio.Navegación: La navegación es importante en cualquier sitio, pero no es el enfoque de este.Contenido: El largo del contenido se encuentra entre el minimalismo del e-commerce y la verbosidad de las sitios de contenido. El diseño debe reflejar el tono del contenido del sitio.Búsqueda: Los sitio pequeños se pueden manejar muy bien con una buena navegación sin necesidad de usar funciones de búsqueda. La información siempre sea de fácil acceso.

USABILIDAD

“<programación>: La efectividad, eficiencia y satisfacción con la que los usuarios pueden realizar tareas en el ambiente particular de un producto. Alta usabilidad significa que un sistema es fácil de aprender y recordar, eficiente, visualmente placentero y divertido y fácil de recuperarse de los errores”.

Jakob Nielsen's Alertbox, December 22, 2003:

Top Ten Errores del Diseño Web de 2003

1. Proposito de Sitio poco claro.Lenguaje vago o generico para describir el proposito del sitio.

2. Nuevos URLs para páginas archivadasArchivar páginas con un URL nuevo, causará molestias en usuarios y sites que enlazaan a esta información.

Jakob Nielsen's Alertbox, December 22, 2003:

3. Contenido sin FechaSin fechas el usuario no podrá descifrar la vigencia del contenido.

4. Thumbnail de imágenes grandes, Fotos detalladasLos Thumbnails deben ser reconocibles a simple vista.

Foto de whitehouse.gov y muestra el presidente de Estado Unidos, el Secretario del Interior y el Director del Servicio Nacional de Parques caminando por las montañas de Santa Mónica.

Foto es de cnn.com, esta foto ilustra una historia sobre inundaciones. En esta imagen se puede ver de que se trata y en un tamaño de 65 x 49 pixels.

Jakob Nielsen's Alertbox, December 22, 2003:Al usar fotos en la Web considera:

• Incluir pocas personas y objetos, en ambientes menos complejos que si fuese una foto para impresión• Utilice close-up con fondos limpios • Use encuadres relevantes al preparar thumbnails

5. Sobre detallar los textos Alternativos (ALT Text)Los textos Alternativos deben ser descriptivos de los que el usuario va a encontrar al hacer link.Los textos Alternativos deben ser descriptivos de los que el usuario va a encontrar al hacer click.

Jakob Nielsen's Alertbox, December 22, 2003:

6. Sites sin información alternativa.Permitir la comparación y la selección es una de las mayores ventajas del Web. Muchos Site no lo ofrecen. Por ejemplo, ¿Por qué al buscar un pasaje de avión para un día X no se presentan de una vez alternativas tarifarias para otros días u horarios más económicos?

7. Listas de Items demasiado largas no pueden ser filtradas por atributos de interés.En muchos Site se presentan listas de Items demasiado largas que sólo se pueden ordenar por un criterio y no permiten el filtrado por atributos. Por ejemplo, todos los productos que pueden ser enviados antes de navidad.

Jakob Nielsen's Alertbox, December 22, 2003:

8. Ordenamiento sólo por marca.La mayoría de los Site de E-commerce sólo permiten ordenar por marcas, pero no permiten realizar un orden por atributos como color, talla, etc.

9. No permitir una entrada de datos natural al usuario.En muchos Sites se obliga al usuario a introducir datos de forma restrictiva y no de la forma “humanamente” natural. Por ejemplo, se obliga a introducir el número de tarjeta de crédito separado en grupos de 4 con un guión entre cada grupo, en vez de permitir la escritura continua del número.

Jakob Nielsen's Alertbox, December 22, 2003:

10. Páginas que enlazan a sí mismas.No se deben realizar enlaces a la misma página donde se encuentra el usuario ya que tiende a confundir la navegación.

CONSIDERANDO ALGO MAS

1. Resolución de pantalla

2. Tipos de imágenes

GIF (Graphics Interchange Format, Formato de intercambio de gráficos) fue creado por CompuServe con el objetivo de que fuese entendido por todo tipo de computadores. Sus Principales características son:

• Limitada a 256 colores, si usamos menos la imagen tendrá menor tamaño.• Compresión sin pérdidas.• Posibilidad de crear imágenes con entrelazado.• Transparencia.• Imágenes con movimiento.

2. Tipos de imágenes

JPEG (Joint Photographic Experts Group) fue creado pensado especialmente para fotografías. Sus principales características son:

• Puede almacenar 16 millones de colores. El tamaño es independiente del número de colores usados.• Ofrece un algoritmo de compresión que reduce considerablemente el tamaño de las fotografías. Esta compresión produce pérdidas, es decir, la imagen sufre deterioro.

VAMOS A LA PRACTICA

www.lost-axn.com

GRACIAS... ;)