curso diseñando para la web - parte 1

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