diseño de interfaces + navegación + información Luis Carlos Aceves G.

Diseño de interfaces Las cosas que el usuario podrá hacer Diseño de navegación Los lugares a los que el usuario podrá ir Diseño de información Las ideas que se desean comunicar al usuario

Diseño de interfaces

Las cosas que el usuario podrá hacer

Diseño de navegación

Los lugares a los que el usuario podrá ir

Diseño de información

Las ideas que se desean comunicar al usuario

diseño de interfaces

diseño de interfaces Representación gráfica de las especificaciones funcionales Conjunto de objetos que son relevantes para la interacción del usuario El enfoque del diseño es hacia las cosas que el usuario podrá hacer dentro del sitio web

Representación gráfica

de las especificaciones funcionales

Conjunto de

objetos que son relevantes para la interacción del usuario

El enfoque del diseño es hacia

las cosas que el usuario podrá hacer dentro del sitio web

Principios para el diseño de interfaces: Simplicidad y elegancia Proximidad y relevancia Enfoque y retroalimentación Una jerarquía de importancia y una jerarquía de tareas La herramienta correcta para el trabajo correcto diseño de interfaces

Principios para el diseño de interfaces:

Simplicidad y elegancia

Proximidad y relevancia

Enfoque y retroalimentación

Una jerarquía de importancia y una jerarquía de tareas

La herramienta correcta para el trabajo correcto

Un buen diseño de interfaces es aquel donde…. el usuario inmediatamente identifica lo que es importante diseño de interfaces

Un buen diseño de interfaces es aquel donde….

el usuario inmediatamente identifica lo que es importante

Un buen diseño de interfaces es aquel donde…. se reconocen las acciones que el usuario tomará, haciéndolas accesibles y fáciles de utilizar diseño de interfaces

Un buen diseño de interfaces es aquel donde….

se reconocen las acciones que el usuario tomará, haciéndolas accesibles y fáciles de utilizar

Un buen diseño de interfaces es aquel donde… lo más importante no es poner un botón grande para que el usuario lo vea, sino: Dejar alguna opción preseleccionada Utilizar rótulos “ver más…” Dar énfasis a lo que el usuario hará dentro del sitio web diseño de interfaces

Un buen diseño de interfaces es aquel donde…

lo más importante no es poner un botón grande para que el usuario lo vea, sino:

Dejar alguna opción preseleccionada

Utilizar rótulos “ver más…”

Dar énfasis a lo que el usuario hará dentro del sitio web

Elementos principales a considerar para la interacción: botones de acciones cajas de selección (checkboxes) botones de selección (radio buttons) cajas de texto (text fields) listas desplegables (dropdown lists) cajas de listas (list boxes) diseño de interfaces

Elementos principales a considerar para la interacción:

botones de acciones

cajas de selección (checkboxes)

botones de selección (radio buttons)

cajas de texto (text fields)

listas desplegables (dropdown lists)

cajas de listas (list boxes)

diseño de navegación

diseño de navegación Forma especializada de diseño de interfaces dirigida a presentar espacios de información Es la manera en la que el usuario puede ver la arquitectura de información y moverse a través de ella El enfoque del diseño es hacia los lugares a los que el usuario irá dentro del sitio web

Forma especializada de diseño de interfaces dirigida a

presentar espacios de información

Es la manera en la que el usuario puede ver la arquitectura de información

y moverse a través de ella

El enfoque del diseño es hacia

los lugares a los que el usuario irá

dentro del sitio web

Un buen diseño de navegación es aquel que… proporciona al usuario al menos un medio de llegar de un lugar a otro diseño de navegación

Un buen diseño de navegación es aquel que…

proporciona al usuario al menos un medio de llegar de un lugar a otro

Un buen diseño de navegación es aquel donde… no necesariamente habrá ligas en cada página hacia todas las otras páginas diseño de navegación

Un buen diseño de navegación es aquel donde…

no necesariamente habrá ligas en cada página hacia todas las otras páginas

Un buen diseño de navegación es aquel donde… las ligas funcionan diseño de navegación

Un buen diseño de navegación es aquel donde…

las ligas funcionan

Un buen diseño de navegación es aquel que… comunica la relación entre los elementos que están enlazados diseño de navegación

Un buen diseño de navegación es aquel que…

comunica la relación entre los elementos que están enlazados

Un buen diseño de navegación es aquel que: permite al usuario conocer qué opciones hay disponibles diseño de navegación

Un buen diseño de navegación es aquel que:

permite al usuario conocer qué opciones hay disponibles

Un buen diseño de navegación es aquel que: comunica coherentemente la relación entre el contenido que el usuario ve y el resto de la página diseño de navegación

Un buen diseño de navegación es aquel que:

comunica coherentemente la relación entre el contenido que el usuario ve y el resto de la página

diseño de información

diseño de información Cómo representar información de forma que el usuario la pueda entender Implica la unión del diseño de interfaces y el diseño de navegación El enfoque del diseño es hacia comunicar al usuario las ideas representadas en el sitio web

Cómo

representar información de forma que el usuario la pueda entender

Implica la

unión del diseño de interfaces y el diseño de navegación

El enfoque del diseño es hacia

comunicar al usuario las ideas representadas en el sitio web

diseño de información Esqueleto de una página del sitio web Debe representar: Las cosas que el usuario podrá hacer Los lugares a los que el usuario podrá ir Las ideas que se desean comunicar al usuario

Esqueleto de una página del sitio web

Debe representar:

Las cosas que el usuario podrá hacer

Los lugares a los que el usuario podrá ir

Las ideas que se desean comunicar al usuario

Uso de prototipos y borradores diseño de información

Uso de prototipos y borradores

diseño de información Uso de wireframes: representan una página de la arquitectura de información

Uso de wireframes:

representan una página de la arquitectura de información

diseño de información Del wireframe a la realidad 1

Del wireframe a la realidad

diseño de información Del wireframe a la realidad 2

Del wireframe a la realidad

diseño de información Del wireframe a la realidad 3

Del wireframe a la realidad