View
6.789
Download
1
Category
Preview:
DESCRIPTION
Primera parte del curso gratuito acerca de diseño, diagramación, layout y buenas prácticas para la Web, ofrecido por Fondiú.
Citation preview
diseñando
para la web
www.fondiu.cl facebook.com/fondiu.cl
diseño en la web:
factores de éxito
• La Web es un medio, un soporte
• Tiene sus propias limitaciones y sus propios códigos
• Los límites nos dan un marco para trabajar (como los bordes de un lienzo)
• Los códigos nos permiten tener un punto de partida (como una caja de pinturas y un pincel)
diseño en la web
• La Web es lenta
• La Web tiene un lienzo variable
• La Web debe "funcionar" (y no sólo ser mirada)
• El usuario es impaciente
• Al usuario no le interesa tu página
• La Web no se comporta como el mundo físico
limitaciones
• "Casi" todo es posible en la Web… si sabemos cómo hacerlo
• Mientras más conozcamos nuestro soporte, más partido podemos sacarle
posibilidades
• No nos referimos al "código" de programación :)
• Códigos son "costumbres" o "modales" que reflejan las expectativas de un usuario
• Tal como cuando nos encontramos con alguien, esperamos que nos salude...
Códigos
Códigos
• De la misma forma, esperamos que un texto azul y subrayado sea un link; o que esa imagen arriba a la izquierda sea el logo de la página
Códigos
• Los códigos y costumbres de los usuarios pueden variar según el entorno en el que ellos se mueven…
Windows: cerrar ventana a la derecha
Mac OS: cerrar ventana a la izquierda
Códigos
• Los usuarios se enfrentan a la Web con ciertas expectativas, basadas en su experiencia del mundo real, y su experiencia con otros sistemas o páginas.
• Entender y respetar los códigos lleva a la consistencia.
consistencia
• La consistencia es la percepción de estabilidad de un sistema.
• Ojo: la percepción
• Podemos hacer un sistema sumamente estable, pero si le genera ansiedad al usuario, será percibido como inestable
• (Piensa en un ascensor que funciona bien, pero que tiene los números cambiados)
consistencia
• El usuario percibirá un sistema como estable en la medida de que se comporte una y otra vez según sus expectativas.
consistencia
Un sistema estable…
• Es familiar
• Es placentero de usar
• Es preferido amado por el usuario
• Reduce ansiedad e incertidumbre
• Le permite reutilizar lo que ya sabe
• Ahorra tiempo y dinero
consistencia
Claves para la consistencia
• El usuario PRIMERO
• El usuario SEGUNDO
• El usuario TERCERO
• Como diseñadores o encargados de interfaz, somos la "voz del usuario"
• Entender comportamientos, expectativas y costumbres de nuestro público objetivo
consistencia
Claves para la consistencia
• No traiciones al usuario
• No confundas al usuario
• No hagas cosas "a espaldas" del usuario
• No le pongas acertijos al usuario (a menos que estés diseñando un juego)
SIMPLICIDAD
"La simplicidad es la sofisticación llevada a su grado máximo"
- Leonardo da Vinci
SIMPLICIDAD
No confundir "simplicidad" con "minimalismo"…
Simplicidad
• Simplicidad es hacérselo lo más fácil posible al usuario.
• Es darle lo indispensable (y nada más que lo indispensable) para cumplir su tarea.
• Es evitarle información que no necesita
• "Gracias, querida página Web, pero si quiero saber la hora me basta con mirar abajo a la derecha, no necesito que me la digas tú"
Simplicidad
• Es evitar hacerle tomar decisiones innecesarias al usuario.
• "Provide Good defaults" -> Que las opciones predeterminadas sean las que le faciliten más las cosas a la mayoría de tus usuarios.
Humildad
• WTF: ¿Humildad?
• Sí, humildad.
• Muchos errores de interfaz y diseño se cometen por egocentrismo, o por suponer ciertas bobadas…
Humildad
Listado de Bobadas
• "La gente está interesada en nosotros"
• "La gente estará feliz de jugar y usar nuestras innovaciones en interfaz Web"
• "La gente tiene tiempo para ver y explorar nuestro sitio"
• "A la gente le gustará el movimiento, la animación en nuestra página"
• "Si me gusta a mí, le gustará al usuario"
Humildad
La Triste y Desafiante Realidad
• A la gente NO le interesa tu sitio > Hazlo interesante, no des la lata
• La gente NO tiene tiempo para ver tu sitio > Hazlo rápido y fácil
• NADIE quiere descubrir nuevas interfaces en tu sitio > Ajústate a las convenciones
• A NADIE le interesa que sepas usar Flash > No lo uses gratuitamente
arquitectura
de información
• Diseñar para la Web no es sólo "hacer monos" o "dejar el sitio bonito".
• Un diseñador no es un maquillador de información; es el responsable de que el contenido se estructure correctamente
arquitectura de información
arquitectura de información
Lo que muchos creen que es un diseñador
Lo que EN REALIDAD debe ser un diseñador
Diseñar para la Web
=
Diseñar la experiencia del usuario en esa Web
(grábatelo)
arquitectura de información
Experiencia de usuario
=
UX (User eXperience)
arquitectura de información
• Hacer AI significa diseñar primero el contenido y después la parte visual.
arquitectura de información
• Parte importante de la experiencia de usuario es el contenido:
• "Viembenido a nuestro zitio Web muy vonito y vien dizeñado"
• Por ende, el contenido también es nuestra responsabilidad.
arquitectura de información
• Nuestro primer producto debería ser un mapa del sitio.
• JAMÁS hay que dar por hecho que el cliente sabe cómo estructurar su contenido (usualmente no sabe)
arquitectura de información
• Cliente: "Bueno, podríamos tener una página Quiénes Somos…"
• Diseñador eficiente: "¿Cuál sería el objetivo de esa página? ¿La necesitamos realmente? ¿Y si fusionamos ese texto en la portada?"
arquitectura de información
• Al hacer AI, debemos siempre apuntar a: – Reflejar el esquema mental del usuario
– Las páginas justas y necesarias (ni más, ni menos)
– Simplicidad
– Brevedad de textos
– Facilidad de navegación
– Jerarquizar y agrupar
arquitectura de información
• Una vez que el contenido está claramente estructurado, podemos pasar a la parte visual.
• (Y diseñar teniendo el contenido como punto de partida es mucho más fácil y efectivo).
arquitectura de información
www.fondiu.cl facebook.com/fondiu.cl
diagramación
y layouts
diagramación
• La disposición de los elementos en una página Web no es trivial.
• El orden y la posición debe guiar al visitante, ayudarlo a encontrar la información que desea e invitarlo a explorar nuevos contenidos.
• LAYOUT: modo de ordenar y mostrar los elementos visuales
• Existen varios layouts de páginas Web, los cuales sirven a propósitos determinados
• Estos tipos nos dan un punto de partida para diagramar
diagramación
• Además, existen ciertas zonas de la página que son universalmente conocidas: – Header (encabezado, donde va el logo y el menú
principal)
– Sidebar (columna angosta de información paralela)
– Footer (pie de página, con info de contacto y datos de copyright)
diagramación
1. Sitio Corporativo
2. Portal
3. Blog
4. Catálogo
5. Portafolio
6. Directorio
7. Aplicación
8. Landing Page
9. Magazine
diagramación
Sitio "clásico", se distingue por tener una imagen y frase potentes, descripciones de productos y servicios, y espacio para otros contenidos abajo.
1. sitio corporativo
Sitio "clásico", se distingue por tener una imagen y frase potentes, descripciones de productos y servicios, y espacio para otros contenidos abajo.
1. sitio corporativo
Templatemonster.com
Se caracteriza por mezclar una gran variedad y cantidad de contenidos. Pensado para una intranet o para público masivo
2. Portal
Se caracteriza por mezclar una gran variedad y cantidad de contenidos. Pensado para una intranet o para público masivo
2. Portal
msn.com
Muy sencillo: privilegia el contenido escrito y la movilidad de los posts en el tiempo, y depende del sidebar para todo lo demás.
3. blog
Muy sencillo: privilegia el contenido escrito y la movilidad de los posts en el tiempo, y depende del sidebar para todo lo demás.
3. blog
Templatemonster.com
Hecho para mostrar muchos productos de una sola vez y fomentar la exploración.
4. catálogo
Hecho para mostrar muchos productos de una sola vez y fomentar la exploración.
4. catálogo
Templatemonster.com
Privilegia enormemente el contenido visual, útil para galerías de diseñadores, fotógrafos, arquitectos, etc.
5. portafolio
Privilegia enormemente el contenido visual, útil para galerías de diseñadores, fotógrafos, arquitectos, etc.
5. portafolio
Templatemonster.com
Es el layout clásico de los buscadores, páginas amarillas, agregadores de contenido.
Enfocado a las listas.
6. DIRECTORIO
Es el layout clásico de los buscadores, páginas amarillas, agregadores de contenido.
Enfocado a las listas.
6. DIRECTORIO
bing.com
Enfocado a que el usuario resuelva una tarea específica. Es usual que aproveche el máximo de espacio posible de la pantalla (ej: Gmail)
7. aplicación
7. aplicación
Enfocado a que el usuario resuelva una tarea específica. Es usual que aproveche el máximo de espacio posible de la pantalla (ej: Gmail)
basecamphq.com
La página en la que "aterriza" un usuario proveniente de una campaña. Diseño minimalista y orientado a una sola acción (CTA)
8. landing page
La página en la que "aterriza" un usuario proveniente de una campaña. Diseño minimalista y orientado a una sola acción (CTA)
8. landing page
campaignmonitor.com
Diseño moderno, rompe con la estructura tradicional de "sitio" y equilibra imagen y texto por igual.
9. magazine
Diseño moderno, rompe con la estructura tradicional de "sitio" y equilibra imagen y texto por igual.
9. magazine
thebolditalic.com
• El layout fijo mantiene siempre el mismo ancho, independiente del tamaño de la ventana.
Layouts: fijo v/s líquido
• El layout líquido se expande en sentido horizontal, aprovechando al máximo el espacio de la ventana.
Layouts: fijo v/s líquido
• CSS en la actualidad permite layouts que permanecen fijos en un cierto ancho, permitiendo su líquidez sobre o bajo ese ancho (útil para sitios móviles).
Layouts: semi-líquido
• El uso de grillas o cuadrículas son una ayuda para un layout eficiente.
• Los layouts antes mostrados pueden ser dibujados sobre una grilla.
grillas (grids)
grillas (grids)
• Sistemas de Grids: – 960 Grids (960.gs)
– Zurb Foundation (foundation.zurb.com)
– Less Framework (http://lessframework.com)
• Las grillas deben ser una herramienta y no una cárcel. Aprende a usarlas y aprende a no usarlas cuando convenga
grillas (grids)
• El espacio en blanco permite al ojo diferenciar los distintos elementos, agrupar la información y descansar la vista.
Espacio en blanco
alistapart.com
INCORRECTO CORRECTO
• Comunica elegancia
• Actúa como un separador visual
• Ayuda a dirigir la vista del visitante
• Jerarquiza la información
Espacio en blanco
naldzgraphics.net
• "Color tipográfico": el uso del espacio en blanco en interlineados y entre caracteres determina qué tanto "mancha" una página el texto.
Espacio en blanco
thinkvitamin.com
Interfaces
¿Qué es una Interfaz?
• Intermediación entre un usuario y un sistema
• Punto de contacto entre el usuario y una herramienta
• Información sensorial que guía al usuario acerca del uso de una herramienta
interfaces
interfaces
• La interfaz de una silla es el lugar donde… apoyamos el trasero (punto de contacto entre el usuario y la herramienta)
interfaces
• La interfaz de un ascensor son sus botones para controlarlo (intermediación e información de uso)
interfaces
• La interfaz de una calle es su señalética (en postes y en el piso) y el trazado de la calle
¿Qué es una Interfaz Web?
• Es el intermediario entre el usuario y el contenido o tarea que le ofrece una página Web.
interfaces
Una interfaz Web debe incluir:
• Imagen de marca
• Organización del contenido
• Controles para las acciones del usuario
• Feedback al usuario sobre las respuestas del sistema
• Navegación a otras páginas
interfaces
Los controles de interfaz determinan cómo interactuará el usuario con el
sistema…
Y no, no da lo mismo.
controles de interfaz
• Una buena interfaz permite que el usuario entienda y vea con claridad las consecuencias de sus acciones.
• Además, le perdona los errores al usuario, y le permite deshacerlos o volver al estado anterior.
• Recordemos: el usuario tiene expectativas acerca de cómo responderá el sistema a sus acciones.
controles de interfaz
• Controles de acciones Vínculos, menús, botones, tabs…
• Organizadores de contenido Paneles, ventanas, tablas, diálogos…
• Ingreso de datos/selección de opciones Listas, casillas, cuadros de texto…
• Informadores Etiquetas, tooltips, mensajes de estado…
controles de interfaz
Controles de acciones – Permiten al usuario ejecutar tareas relacionadas con datos, como visitar otra página o enviar un formulario.
– Vínculo
– Menú
– Botón
– Tab (pestaña)
controles de interfaz
Controles de acciones …
controles de interfaz
Vínculo Botón
Menú
Tabs
Organizadores de contenido – Contienen y separan información de modo de hacerla accesible y legible al usuario cuando la necesite.
– Panel
– Ventana
– Tabla
– Diálogo
– Acordeón
controles de interfaz
Organizadores de contenido …
controles de interfaz
Panel Ventana
Organizadores de contenido …
controles de interfaz
Tabla
Diálogo
Acordeón
Ingreso de datos o selección de opciones – Permiten al usuario ingresar información o elegir entre varias alternativas.
– Combobox
– Select
– Checkbox
– Botones de radio
– Cuadros de texto
controles de interfaz
Ingreso de datos o selección de opciones…
controles de interfaz
Select (combo box) Select (list box) Checkbox
Botones de radio
Cuadros de texto
Informadores – Entregan información contextual y complementaria que facilita las acciones del usuario y le permite saber la respuesta del sistema.
– Tooltips y globos flotantes
– Etiquetas
– Mensajes de información
– Barras de estado
controles de interfaz
Informadores…
controles de interfaz
Tooltip Etiqueta
Mensaje de información
Barra de estado
www.fondiu.cl facebook.com/fondiu.cl
Recommended