1. diseño de interfaz
Tecnologías web
Lab. Diseño Gráfico 2009
Zara Hormazábal D.

2. El diseño web o digital hoy
La función de la “web 2.0” es netamente operativa, funcional e interactiva.
Como ya vimos la nueva web es:
•Dinámica, más de una funcionalidad y/u objetivos
•Interacción con contenidos externos
•No tenemos una dimensión exacta del tamaño hacia adentro y hacia abajo
de contenidos.
•Además no sabemos exactamente y no debemos limitar los tipos de
elementos en un sitio (fotos, videos, arc. descargables, etc)

3. ¿Cómo afecta al diseño?
Por lo tanto el diseñador, no solo debe preocuparle el quot;lookquot; de un sitio, sino
preocuparse de varios parametros que afecten el diseño y al usuario.
Ya no es sólo Diseño, es Experiencia de Usuario.
Como vimos la Experiencia de usuario, es un trabajo más profundo que
abarca sicología, estudios de comportamientos de usuario y además de uso
de distintos medios técnologicos.
Por lo mismo un diseñador quot;webquot; puede enfocarse a distintas disciplinas
dentro del diseño.

5. Definición de diseño... para la web
Diseño de interacción
“El diseño de interacción es a la vez un campo de estudio y un punto de vista
que se ocupa de diseñar experiencias interactivas. Estas experiencias
pueden desplegarse desde cualquier medio (como por ejemplo: actos en vivo,
productos, servicios, etc.) y no solamente el medio digital...” (Nathan
Shedroff)
“El diseño de interacción es una sub-disciplina del diseño que examina el rol
del comportamiento y la inteligencia embebida en espacios físicos y
virtuales, así como de la convergencia de las dimensiones físicas y digitales
en la concepción de productos y servicios” (Wikipedia)

6. Definición de diseño... para la web
Diseño de interfaz
quot;En el contexto de interacción Humano-Computador tradicional: diseño de
los elementos de la interfaz para facilitar la interacción del usuario con la
funcionalidad.quot; (Jesse James Garret)
Se denomina interfaz al conjunto de elementos de la pantalla que permiten al
usuario realizar acciones sobre el Sitio Web que está visitando. Por lo mismo,
se considera parte de la interfaz a sus elementos de identificación, de
navegación, de contenidos y de acción. (http://www.guiaweb.gov.cl)

7. Definición de diseño... para la web
Diseño visual
quot;Estudia los sistemas de información, con el objeto de convertir los datos en
formas visuales, teniendo en cuenta los procesos perceptivos (visión) y
cognitivos. Con el fin de generar sistemas de información que interactúan
con la comunidad y sus referentes significacionales, a través de los procesos
comunicativos.quot; (Wikipedia)
quot; Tratamiento visual de los elementos de texto y gráficos en la página y
componentes de navegaciónquot; (Jesse James Garret)

8. Reglas básicas del diseño
¿cómo piensan los usuarios web?
- no son muy diferentes de los clientes de una tenda en la vida real.
- hacen clics porque les atrae o creen que son útiles
- aprecian la calidad y la credibilidad.
- no leen. Escanean.
- son impacientes y esperan gratificaciones instantáneas
- no siempre toman las mejores decisiones.
- confían en su intuición.
- desean tener el control sobre su navegador.

9. Reglas de “oro” del diseño
No hagas pensar a los usuarios
Una página debe ser obvia y explicarse a sí misma 1.
La navegación debe ser clara, con pistas visuales adecuadas y enlaces fácilmente
reconocibles.
Los usuarios entienden mejor los sitios web diseñados en patrones en F 2.
Reduciendo la incertidumbre de un usuario ante el sitio, ayudarás a que los
usuarios cumplan sus objetivos. Si los usuarios no encuentran su camino, te
abandonarán.
1. Del libro Don’t make me think de Steve Krug’s, primera ley de la usabilidad.
2. Del artículo F-Shaped Pattern For Reading Web Content de Jakob Nielsen's

10. Reglas de “oro” del diseño
Usuarios curiosos e impacientes
Ofrece servicios sencillos, prácticos y directos
La satisfacción es el mejor “gancho”
Aumenta la confianza de los usuarios, gratificando sus acciones correctas y
ayudando a resolver las incorrectas.

11. Reglas de “oro” del diseño
Un sitio forma parte de la imagen corporativa de una
organización
Su diseño debe ser atractivo y no exagerado
Debe contar con una paleta de color apropiada, acorde al objetivo del sitio y a la
imagen corporativa

12. Reglas de “oro” del diseño
Crea un discurso visual claro
Aaron Marcus
Organiza: para proveer una estructura limpia, concistente y con navegación
intuitiva.
Economiza: Haz más con menos, empleando los principios de simplicidad, claridad,
distinción y énfasis.
Comunica: Coincide con la presentación a las capacidades del usuario al fin de que la
comunicació sea más simple

13. Reglas de “oro” del diseño
Jerarquizar y sacar mejor partido a los puntos focales
Organiza apropiadamente la página principal del sitio
Ofrece pistas que eviten incetidumbre
No distraigas a los usuarios con imágenes, efectos o acciones inecesarias
Diseña pensando en el usuario
Simplicidad
Un usuario busca información, no entretención y en este caso prefieren ver sitios
basados en textos

14. Reglas de “oro” del diseño
No temas al espacio en blanco
El espacio blanco refiere a las porciones de espacio que se crean entre los elementos
El buen uso de este espacio genera equilibrio, favorece la lectura y crea una
composición estética
Las estructuras complejas se vuelven ordenadas con espacio negativo suficiente
Separa los elementos visuales, ayuda a generar jerarquía

15. Reglas de “oro” del diseño
Evita el exceso de información
La gente lee 25% más lento en pantalla que en papel
El 79% prefieren escanear visualmente la información en vez de leerla a detalle
Los usuarios leerán sólo el 20% del texto en una página promedio

16. Reglas de “oro” del diseño
Los elementos convencionales, no innovar
Usa patrones y elementos a los que los usuarios ya están acostumbrados
Los patrones disminuyen la curva de aprendizaje porque la gente ya sabe que
hacer, cuándo y qué esperar a cambio
Las convenciones ayudan a generar confianza y credibilidad

17. Reglas de “oro” del diseño
Prueba, prueba y vuelve a probar
Todo proyecto web debe probarse, es una ley natural de las pruebas de usabilidad
Hacer pruebas antes, durante y frecuentemente a un sitio sólo ayudarán a
mejorar cada aspecto del sitio

18. Tendencias de diseño
Estructuras simples
Usa estructuras simples de 1 a 3 columnas
Un diseño simple funciona mejor (pocos elementos, bien organizados)
Los diseños en general se pueden entender al primer vistazo, sin tener que
estar vagando para entender el concepto general.

19. Tendencias de diseño
Diseño centrado
El diseño centrado ofrece: confianza, balance, simpleza.
Los patrones de diseño alineado a la izquierda cada vez son menos comunes, lo
mismo que las estructuras líquidas.

20. Tendencias de diseño
Fondos claros o neutros
La mayoría de los sitios tienen fondos planos, casi siempre blancos o
degradados en grises.
Esta gama neutral, simple, y relajada es una base perfecta para colores
vibrantes.

21. Tendencias de diseño
Tintes de color brillantes usados con precisión
El diseño de los últimos años sobresale por los colores juveniles y vibrantes,
no sólo para los blogs, sino para sitios comerciales importantes.
La Web 2.0 trajo a las tendencia en moda los verdes, anaranjados, azules y
violetas aplicados a grandes titulos, iconos enormes y destellos de color a lo
largo de los sitios.

22. Tendencias de diseño
Espacio blanco
El espacio blanco no necesariamente debe ser blanco, simplemente de ser un
espacio.
Texto grande
Los textos más importante de la página son más grandes que el texto
regular

23. Un buen sitio web
Es fácil de usar
Tiene información práctica, simple y bien redactada
Requiere de pocos clics para navegarlo
No tiene secciones en construcción ni contenido incompleto
No usa pop‐ups
No usa flash, animaciones, frames (marcos) ni imágenes innecesarias
Pesa poco (menos de 100 – 150 kbs)
Usa tipografias genéricas disponibles para cualquier usuario
Es legible aún y cuando el texto cambie de tamaño
Incluye archivos en formatos comunes DOC, RTF, PDF, JPG, MP3, etc.
Usa enlaces con textos descriptivos y evita el uso de indicaciones como
“haz clic aquí”
Usa metadatos para catalogar y jerarquizar correctamente su contenido

24. Un buen sitio web
Es accesible:
– usa colores contrastantes para facilitar la lectura
– usa etiquetas ALT en las imágenes
– tiene índices de contenido
– puede ser leído (u oído) aún sin CCS ni imágenes
– provee todo su funcionamiento sin necesidad de Javascript
– incluye textos alternativos para todo elementos no textual.
Permite la retroalimentación o contacto, que además, es accesible y monitoreada
constantemente.
Tiene un buscador que produce resultados relevantes, especialmente para las
páginas más consultadas.

25. Referencias y bibliografía
Designing Effective User Interfaces by Suzanne Martin
“The psychology of computer programming” by Gerald Weinberg
“Designing Web Usability” by Jakob Nielsen [JN / DWU]
“Prioritizing Web Usability” by Jakob Nielsen
“Don’t Make Me Think” by Steve Krug
“Usability for the Web: Designing Web Sites that Work” by Tom Brinck, Darren Gergle
Scott Wood
A Summary of Principles for User-Interface Design
http://www.smashingmagazine.com
El arte de crear (buenos) sitios web: diseño, desarrollo y estándares
Miriam Avila, Isabel Villarreal e Ivan Santiesteban

26. diseño de interfaz
Tecnologías web
Lab. Diseño Gráfico 2009
Zara Hormazábal D.