1. Educación

Diseño Visual de
Interfaces Visuales
ESTRUCTURA Y ELEMENTOS DE DISEÑO
EL COLOR
El color es un fenómeno psicológico, una experiencia subjetiva que
depende de dos conjuntos de factores: las propiedades físicas de la luz
y el modo en que se organiza el sistema nervioso humano.
R
G
B
FORMATOS DE IMAGEN
PIXELES
Un píxel o pixel, plural píxeles es la menor unidad homogénea en
color que forma parte de una imagen digital, ya sea esta
una fotografía, un fotograma de vídeo o un gráfico.
La resolución expresada en (ppp) o (ppi), son los píxeles por
unidad de longitud, es decir, los píxeles por pulgada. La pulgada
mide 2,54 cm.
La resolución define la cantidad de píxeles que contiene una
imagen y la dimensión de estos píxeles expresan de qué forma se
reparten en el espacio. La resolución es la relación entre las
dimensiones digitales (los píxeles) y las físicas, las que tendrá una
vez impresa sobre papel.
La resolución mínima para impresión es de 300 DPI, la resolución
mínima para pantalla es de 72 DPI.
PIXELES
FUENTES TIPOGRÁFICAS
Una fuente es un conjunto de caracteres del tamaño de un tipo de
letra, y usualmente incluye letras de caja alta, caja baja, versalitas,
cifras, fracciones, ligaduras, signos matemáticos, de puntuación y
de referencia.
FACTORES QUE AFECTAN LA TIPOGRAFÍA
TIPO DE ESTRUCTURAS
La estructura es muy importante para definir una interfaz, ya que
una buena estructura permitirá al lector visualizar todos los
contenidos de una manera fácil y clara, mientras que una interfaz
con una mala estructura producirá en el lector una sensación de
estar perdido, no encontrará rápidamente lo que busca y
terminará por abandonar nuestro programa o sitio.
Para escoger el tipo de estructura hay que tener en cuenta:
Planifique la estructura antes de empezar
La estructura depende del contenido
TIPOS DE ESTRUCTURAS
Jerárquica
La estructura jerárquica, es la
típica estructura de árbol, en
el que la raíz es la hoja de
bienvenida. Este tipo de
organización permite al lector
conocer en qué lugar de la
estructura
se
encuentra,
además de saber que, con
forme se adentra en la
estructura
obtiene
información más específica y
que la información más
general se encuentra en los
niveles superiores.
TIPOS DE ESTRUCTURAS
Lineal
Esta estructura es muy útil cuando queremos que el usuario
siga un camino fijo y guiado, además impedimos que se
distraiga con enlaces a otras páginas. Por otra parte podemos
causar a lector la sensación de estar encerrado si el camino es
muy largo o poco interesante.
Este tipo de estructura sería válido para tutoriales de
aprendizaje o tours de visita guiada.
TIPOS DE ESTRUCTURAS
Red
La estructura de red es una
organización
en
la
que
aparentemente no hay ningún
orden establecido, las páginas
pueden apuntarse unas a otras
sin ningún orden aparente.
Este tipo de organización es la
más libre, pero también es la
más peligrosa ya que si no se
informa al lector de en dónde se
encuentra, puede perderse o
puede no encontrar lo que anda
buscando o no llegar a ver lo
que le queremos mostrar.
Interfaz de usuario
• Los usuarios de sistemas, frecuentemente juzgan el
sistema por su interfaz.
• Un diseño de interfaz pobre puede provocar que el
usuario cometa errores catastróficos, por esta razón
muchos sistemas nunca son usados.
• Las Interfaces de usuario se soportan en ventanas,
iconos, representación de entidades, desplegado de
menús y punteros.
Ventajas de las GUI
•
Son fáciles de aprender y usar.
– Usuarios sin experiencia pueden aprender el uso del
sistema rápidamente.
•
El usuario puede cambiar rápidamente desde una proceso
a otro y puede interactuar con diferentes aplicaciones a la
vez.
– La información aparece visible en su propia ventana
cuando la atención cambia.
•
El acceso es Rápido, la interacción a pantalla completa es
posible, permitiendo un acceso inmediato a cualquier cosa
sobre la pantalla.
Principios de Diseño de la
interfaz de Usuario
Manipulación directa
• Una manipulación directa de la interface
presenta al usuario un espacio donde puede
visualizar su información, la cual es modificada a
través de una acción directa. Por ejemplo
nombres en un campo determinado cambian al
escribir un nuevo nombre sobre ellos.
• Las (GUI “Interfaz gráfica de usuario”) proveen
una manipulación directa. Por ejemplo los
archivos pueden borrarse moviendo los iconos
hacia el icono de un bote de basura disponible
en el entorno del sistema.
Ventajas de la
manipulación directa
• El usuario siente que posee el control de su
equipo de computo, se siente menos
intimidado por él.
• El usuario aprende en un tiempo
relativamente corto.
• Los usuarios obtienen casi inmediatamente
una retroalimentación de sus múltiples
interacciones con el equipo sean buenas o
no, y es capaz de reconocerlas y corregirlas
casi instantáneamente.
Modelo Mental
• Concepto que proviene de la psicología, es un
mecanismo del pensamiento mediante el cual
un ser humano intenta explicar como funciona
el mundo real.
Modelo Mental
• En IGU, el modelo mental es la representación
que construye una persona para comprender el
funcionamiento de un sistema.
• Ayuda a los usuarios a formar un acertado y útil
modelo del sistema.
Paradigmas para la interfaz de
usuario (Alan Cooper)
Paradigmas en el diseño de interfaces:
• Paradigma Tecnológico, se basa en
entender como trabajan las cosas
• Paradigma Metafórico, se basa en intuir
como trabajan las cosas
• Paradigma Idiomático, se basa en
aprender como se llevan a cabo las cosas
Paradigma Tecnológico
•
•
•
La interfaz expresa los
elementos de la tecnología
en que se ha construido,
muestra el esquema interior
del software
El usuario ha de entender
cómo funciona para poder
interactuar con él
No es el software el que se
adapta al usuario sino al
revés
Paradigma Metafórico
La interfaz se expresa a través de una metáfora
que oculta el funcionamiento interno del programa
y que se refiere a términos más o menos
familiares para el usuario
Son ampliamente conocidas las metáforas
como “escritorio”, “papelera”, “carpeta”,
“documento”, “ventana”
Paradigma Idiomático
• Está basado en la forma en que aprendemos
nuevos lenguajes
• Sólo depende de la habilidad de los humanos para
aprender
– Por ejemplo, el ratón no es la metáfora de nada
pero se aprende a usar de forma efectiva
– Las barras de scroll son otro ejemplo de lo
mismo, no representan nada pero se aprenden
muy fácilmente
– En la realidad no es tan fácil “deshacer” (undo)
Paradigma idiomático
• El diseño de interfaz también construye su propia
gramática
• Soluciona los problemas de los dos paradigmas
anteriores
• Los elementos de un GUI son elementos que
entendemos idiomáticamente más que intuirlos
metafóricamente
• Sólo se depende de la habilidad para aprender
• No se fuerza a entender el cómo y el por qué.
• Las metáforas útiles se pueden acabar, pero
siempre se puede crear un nuevo idioma
Principios del diseño IGUs
•
•
•
•
•
•
•
•
•
•
Simplicidad
Consistencia
Familiaridad
Disponibilidad
Flexibilidad
Eficacia
Predicción
Retroalimentación (Feedback)
Seguridad (Estabilidad)
Affordance
SIMPLICIDAD
CONSISTENCIA
Dentro de toda la aplicación se conserva
una unidad entre los elementos: secuencia
de acciones, términos, composición,
colores, tipografía, etc.
Familiaridad
Parte del trabajo de diseñador de interfaces
consiste en re-descubrir los principios que rigen los
dispositivos de interacción presentes en la vida
cotidiana y llevarlos a la pantalla interactiva
Disponibilidad
Recordarle al usuario las opciones disponibles,
evitando que tenga que memorizar funciones.
EFICACIA
PREDICCIÓN
Relacionado con el concepto de consistencia, una vez
que se aprende la mecánica del IGU, el usuario puede
predecir como funciona un elemento nuevo
RETROALIMENTACIÓN
AFFORDANCE
REGLAS PARA CREAR
UN BUEN DISEÑO
“Las reglas se
pueden romper,
pero nunca ignorar”.
Ten un Concepto
Si no hay mensaje, ni idea, ni narración, no es diseño gráfico
Hay que comunicar,
no decorar.
"¡Oh, es precioso! Pero ¿qué es?"
Habla con un único
lenguaje visual
Pregúntate, "¿Se relaciona todo con todo de forma armoniosa?".
Utiliza dos familias
tipográficas como máximo.
Bueno, o tres.
Demasiados tipos son motivo de distracción ...
Golpea en dos tiempos:
¡un, dos!
Atrae la atención del espectador hacia un elemento importante y
después condúcela por lo demás.
Escoge los colores
con un propósito.
No utilices los primeros que se te ocurran.
Si puedes hacerlo
con menos, adelante.
Si la idea esta clara, es innecesario recargarla.
El espacio negativo es
mágico: no lo rellenes
¡créalo!
El espacio llama la atención sobre el contenido.
Trabaja la tipografía como si
tuviera la misma importancia
que la imagen.
La tipografía es material visual, y como tal,
necesita relacionarse con los demás
elementos del diseño.
Tienes que ser universal;
recuerda tu trabajo no es
para ti.
Lo universal es el dominio del diseñador.
Busca en la historia,
pero no la repitas
Aprende del trabajo de los demás, pero haz
tú mismo los deberes.
Diseñar es mucho más que
simplemente ensamblar, ordenar,
incluso editar: es añadir valor y
significado, iluminar, simplificar, aclarar,
modificar, teatralizar, persuadir y, quizá,
incluso entretener.
Es el principio, el fin, el proceso y el
producto de la imaginación.
Taller: Visión Futurista
Generar una propuesta de diseño a partir de un elemento que
requiera la creación de una interfaz visual, el objeto debe ser
inexistente, es una visión al futuro.
El trabajo debe tener:
• Un análisis del objeto a diseñar, que objetivo va a cumplir dicho
elemento.
• Que interfaz de usuario propone para el producto de diseño.
• Cual es el funcionamiento del sistema mediante las interfaces
de usuario.
• Describa los componentes del sistema y explique los tipos de
relaciones y propiedades que este tiene. Tenga en cuenta la
interfaz como un componente importante dentro de su
funcionamiento.
• Criterios para el Diseño de la Interfaz.
• Utilización de bocetos del objeto propuesto.