UNIDAD - WordPress.com · familiares al usuario. El . escritorio. es la primera . metáfora...
145
Universidad del Zulia. Facultad de Arquitectura y Diseño. Programa de Diseño Gráfico. TALLER 5 1er – 2010 Lic. María de los Ángeles Ferrer UNIDAD LUZ. FAD. PDG TALLER 5 1er – 2010 Lic. María de los Ángeles Ferrer Diseño de interfaz gráfica. GUI
Transcript of UNIDAD - WordPress.com · familiares al usuario. El . escritorio. es la primera . metáfora...
Universidad del Zulia.Facultad de Arquitectura y Diseño.Programa de Diseño Gráfico.TALLER 51er – 2010
Lic. María de los Ángeles Ferrer
UNIDAD
LUZ.
FAD.
PDG
TALL
ER
51e
r –20
10
Lic. M
aría
de lo
s Áng
eles F
erre
r
Diseño de interfaz gráfica. GUI
inter = Proviene del latín INTER, y significa “entre” o “en medio”
faz = Proviene del latín facies, y significa “superficie, vista o lado de una cosa”
“Superficie, vista o lado mediador”
inter faz
interfaz =
La GUI es un espacio de interacción y comunicación
Comunicación Acción en la que dos o más individuos, son capaces a través de un medio, de transmitir, recibir e interpretar información, utilizando un mismo código
EMISOR RECEPTORCódigo
Interacción Acción que se ejerce recíprocamente a manera de diálogo, entre el ordenadory el usuario
EMISOR RECEPTORCanalGUI
Es el espacio que media la relación de un sujeto y un ordenador o sistema interactivo… posibilita a la persona interactuar con él.
Marrero, 2006.
“
”Es el punto de unión entre el contenido de una aplicación o página web y el usuario.
Dabbs, Campbell, 2006: 210
“
”
Interfaz gráfica de
usuarioGUI
Definición
Interfaz gráfica de
usuarioGUI
Definición
Medio por el que un programa se
comunicacon el usuario
Aguadero, 1998: 59
“”
Forma en que la
información es presentada al usuario, permitiéndole a la vez interactuar con ella a su gusto. Tiene como propósito comunicar los elementos de los que dispone la aplicación y lo que se puede hacer con los mismos
La interfaz se materializa a través de la pantalla (es el medio directo de comunicación aplicación -usuario), y por medio de la misma, el usuario puede acceder a la información a través del resto de periféricos
Principios a considerar en el diseño de una GUI
páginas autónomasLos documentos electrónicos ofrecen mucha más autonomía de los impresos
Los hipertextos le permiten al usuario acceder a las páginas sin ningún tipo de preámbulo, nunca se sabe cual será la primera página que visitará el usuario
Por eso toda interfaz gráfica requiere:• Titulo informativo• La identidad del creador (personal, institución)• Fecha de actualización• Enlace a la página principal o home
diseño centrado en el usuarioEl objetivo de toda GUI es satisfacer las necesidades de todo usuario potencial
Por ello, es crucial la investigación de las necesidades del público potencial (target), adaptando el medio a sus expectativas
Esta información constituye la
base para lograr un diseño centrado en el usuario, pero pensando
siempre en la diversidad funcional de los mismos, y en como el diseño podría responder a dicha variedad.
ayudas claras de navegación•Iconos consistentes y claros, para facilitar el proceso de interacción (metáforas visuales)
Permite el reconocimiento intuitivo a través de signos, normalmente familiares al usuario.
El escritorio es la primera
metáfora (carpetas, documentos, herramientas, lápices y tinteros).
Beneficios de la utilización
de iconos:
-Son más fáciles de comprender.
-A distancia pueden ser mejor reconocidos que signos textuales.
-Cruzan la barrera de la cultura de mejor modo que el lenguaje verbal.
-Tienen reconocimiento internacional.
-Son capaces de trasmitir conceptos en menos espacio que una palabra.
ayudas claras de navegación
http://www.cybergraphix-anim.com/
ayudas claras de navegaciónLas barras de botones son útiles
(muchas posibilidades de selección en poco espacio) y predecibles (se ubican en el mismo sitio a lo largo del recorrido).
Estas proporcionan un identidad gráfica consistente a cada página de la aplicación
El usuario debe poder
retornar siempre
a la página principal y a otros puntos de navegación importantes
(secciones principales)
Las barras de botones le muestran
al usuario el contexto general de la aplicación, para posteriormente explorar la misma.
Son elementos agrupados dentro de una barra o de un área específica en la interfaz.
Pueden ser textuales, signos e imágenes.
ayudas claras de navegación
Las barras de botones principales se suelen
denominar menúprincipales, y las secciones secundarias se denominan
submenú
Toda página debe contener al menos un enlace.
Las páginas sin enlace a ninguna otra página del sitio generan por lo regular, frustración en el usuario
evitar páginas sin salida
Ofrecer al usuario la información que desea con el mínimo de pasos posibles y en un tiempo más corto.
Desarrollo rápido de las actividades propias del medio, traducidas en satisfacción del usuario.
acceso directo a información
El usuario no tolera demoras largas.
Sitios web lentos desilusionan al usuario.
Hay que recordad que todavía muchos usuarios navegan por la Red a través de conexiones vía telefónica y a una velocidad de 28.8 kbps
interacción y velocidad
diseñar para las mayoríasNo es apropiado diseñar para el mínimo común denominador.
Debe considerarse como se visualizará el diseño si las condiciones no son ni el mejor equipo, ni las últimas versiones de software, ni una buena conexión a internet
No diseñes para tu máquina, sino para el usuario promedio
diseñar para las mayorías-Verifica siempre los diseños de tus páginas en diferentes resoluciones de pantalla y diferentes dispositivos
-Intenta desactivar los gráficos de tu navegador y comprueba como se visualiza la página sin estos
-Intenta con monitores monocromáticos o de 8 bits (256 colores)
resolución de pantalla- Se debe evaluar la
resolución de pantalla de los diferentes monitores.
-Ya es bastante molesto usar la barra de desplazamiento vertical, como para obligar también al desplazamiento horizontal
800
x 60
0
1024
x 7
68
1280
x 7
20
1280 x 800
640
x 48
0
1440x 900
organización de informaciónHay cuatro pasos esenciales para la organización de la información:
1. Dividir el contenido en unidades lógicas.
2. Establecer una jerarquía de importancia entre las unidades.
3. Utilizar la jerarquía para estructurar los vínculos o relaciones entre las unidades.
4. Analizar la función de la estructura propuesta
organización de informaciónHay cuatro pasos esenciales para la organización de la información:
1. Dividir el contenido en unidades lógicas.
2. Establecer una jerarquía de importancia entre las unidades.
3. Utilizar la jerarquía para estructurar los vínculos o relaciones entre las unidades.
4. Analizar la función de la estructura propuesta
Contenidos cortos pueden ser localizados y visualizados rápidamente.
Los usuarios digitales no leen largos párrafos en la Red (los guardan o los imprimen)
Dividir la información facilita su organización.
Fragmentos sintéticos de información encajan mejor en las pantallas de monitor (scroll, desplazamineto)
organización de informaciónHay cuatro pasos esenciales para la organización de la información:
1. Dividir el contenido en unidades lógicas.
2. Establecer una jerarquía de importancia entre las unidades.
3. Utilizar la jerarquía para estructurar los vínculos o relaciones entre las unidades.
4. Analizar la función de la estructura propuesta
La organización jerárquica en la red es una necesidad.
Movilización desde el plano general del conjunto (página principal o home) hasta las páginas más sencillas (submenú)
organización de informaciónHay cuatro pasos esenciales para la organización de la información:
1. Dividir el contenido en unidades lógicas.
2. Establecer una jerarquía de importancia entre las unidades.
3. Utilizar la jerarquía para estructurar los vínculos o relaciones entre las unidades.
4. Analizar la función de la estructura propuesta
Una organización lógica del sitio permite al usuario prever eficazmente donde puede encontrar las cosas.
organización de informaciónHay cuatro pasos esenciales para la organización de la información:
1. Dividir el contenido en unidades lógicas.
2. Establecer una jerarquía de importancia entre las unidades.
3. Utilizar la jerarquía para estructurar los vínculos o relaciones entre las unidades.
4. Analizar la función de la estructura propuesta
Analizar la funcionalidad y eficacia del recorrido propuesto para el usuario.
Ofrecerle al usuario una navegación consistente y predecible supone ofrecerle al usuario la posibilidad de predecir la estructura y organización del sitio.
arquitectura - navegabilidad
Consiste en la
estructura organizativa concebida para mostrar e interactuar con la información del recurso multimedia.
Depende de la cantidad de información y del número de secciones o vínculos relacionados.
Es necesario diseñar un mapa de navegación que bosqueje las conexiones o vínculos de los diferentes contenidos, y que ayude a la organización y presentación de los mismos
“
”Vaughan, 1995
arquitectura - navegabilidadLas principales estructuras de navegación son:
Lineal, en la que el usuario navega de manera secuencial de principio a fin, y la más común, la
no lineal, por medio de la cual el usuario navega con libertad sin restringirse a recorridos preestablecidos.
Red
Árbol
Mixta
Lineal (secuencial)
no lineal
árbol red
El usuario debe sentirse cómodo y convencido de que va a encontrar fácilmente lo que busca.
Una vez que el usuario reconoce las zonas de identificación y de navegación, la interfaz se vuelve casi invisible, facilitando la interacción
consistencia y simplicidad
Títulos, subtítulos, pies de páginas y enlaces de navegación fortalece la sensación de que se está en un determinado contexto en la web.
consistencia-Estructurar las pantallas de manera
clara y consistente. Cada elemento en pantalla debe ser consistente en su posición, función y significado.
-Crear retículas que refuercen la coherencia.
-Establecer estilo para los textos y elementos gráficos.
-Unidad a lo largo de todas las páginas.
-Consistencia se va a traducir en
facilidad de uso.
La repetición no es aburrida, sino que le aporta a la aplicación una fuerte identidad gráfica.Lynch y Horton, 2000
“
”
UN
IDA
D
http://www.m-c-z.net/#
http://www.m-c-z.net/#
http://www.cheyenne-pt.com/collection/
http://www.cheyenne-pt.com/collection/
simplicidad-No saturar visualmente la pantalla.
“Menos es más”-Facilita la comunicación con el usuario
-Fácil de aprender y usar, independientemente de la experiencia, conocimiento y capacidades del usuario.
-El diseño ha de comunicar de forma efectiva, independientemente de las capacidades sensoriales del mismo.
http://www.min-style.de/
atractivo y estético-Atributos visuales o auditivos
agradables.
-Es preciso proporcionar un
entorno agradable que contribuya al entendimiento por parte del usuario de la información presentada.
-Debe ser una
propuesta innovadora.-Que deleite los sentidos
Un multimedia de apariencia descuidada, con un diseño visual y contenido
pobre, no transmiten ningún tipo de seguridad
jerarquía visualEnfatizar los elementos importantes y organizar los contenidos de manera lógica.
Composición, tipografía e ilustración son elementos utilizados para guiar el ojo humano de manera lógica por el contenido de la página.
El lector rimero visualiza la página como grandes masas de color y forma (manchas), luego escoge entre la información (analiza), para después detallar el texto y leercontenidos.
1. Manchas 2. Análisis
1
23
3. Lectura
La tipografía juega un doble papel en la comunicación: verbal y visual…
Una buena tipografía establece una jerarquía visual que facilita la lectura, al proporcionar tanto interrupciones visuales como énfasis gráficos, que ayudan a entender la relación entre el texto y la imagen.Lynch y Horton, 2000
“
”
La pantalla de un computador (72 dpi) reproduce la fuente a una resolución muy inferior a la que encontramos en cualquier medio impreso (300 dpi a 1.200 dpi)
La zona útil de la pantalla típica es menor que la mayoría de las páginas de un libro o revista, limitando a la información que se pueda mostrar sin forzar a utilizar la barra de desplazamiento.
tipografía digital
En la web, al especificar el tipo de letra, debes escoger por las que vienen por defecto en todos los sistemas operativos. Si utilizas otra, el navegador utilizará la fuente que el usuario tenga configurada por defecto.
tipografía digital
Un aspecto importante es la
legibilidad en pantalla(grosor, anchura, forma, cuerpo y proporción del mismo)
- Los signos de palo seco ofrecen mayor limpieza visual que los tipos con remate
- el tipo en la pantalla es un signo luz, (el impreso es signo materia). La legibilidad del tipo luz ofrece mayor dificultad sobre el ojo, ralentiza la lectura y dificulta la compresión.
tipografía digitalPara la legibilidad en pantalla son muy importante
tanto la altura – x (la altura de la letra x minúscula), como la forma general de las letras
-Los textos deben ser legibles y claros
-La relación tipo / color juega un papel importante (tono, contraste)
-Se recomiendan textos oscuros sobre fondos claros y viceversa
-Los fondos oscuros son recomendados por impactar menos la retina, permitiendo así mayor lectura
tipografía digital
textotextotextotextotexto
-Textos alineados a la izquierda son más recomendados
tipografía digital
Un texto es una composición de signos codificado en un sistema de escritura (como un alfabeto) que forma una unidad de sentido. Su tamaño puede ser variable, desde una obra literaria como "El Quijote" al mensaje de volcado de pila del kernel de Linux.También es texto una composición de caracteres imprimibles (con grafía) generados por un algoritmo de cifrado que, aunque no tienen sentido para cualquier persona, si puede ser descifrado por su destinatario texto claro original.
Un texto es una composición de signos
codificado en un sistema de escritura (como un
alfabeto) que forma una unidad de sentido. Su
tamaño puede ser variable, desde una obra literaria como "El Quijote" al mensaje de volcado de pila del kernel de Linux.También es texto una
composición de caracteres imprimibles (con grafía) generados
por un algoritmo de cifrado que, aunque no
tienen sentido para cualquier persona, si
puede ser descifrado por su destinatario texto claro
original.
Un texto es una composición de signos
codificado en un sistema de escritura (como un
alfabeto) que forma una unidad de sentido. Su
tamaño puede ser variable, desde una obra
literaria como "El Quijote" al mensaje de volcado de
pila del kernel de Linux.También es texto una
composición de caracteres imprimibles (con grafía) generados
por un algoritmo de cifrado que, aunque no
tienen sentido para cualquier persona, si
puede ser descifrado por su destinatario texto claro
original.
-Se recomienda siempre utilizar altas y bajas. En largos bloques de texto no es recomendable usar solo mayúsculas
tipografía digital
Un texto es una composición de signos codificado en un sistema de escritura (como un alfabeto) que forma una unidad de sentido. Su tamaño puede ser variable, desde una obra literaria como "El Quijote" al mensaje de volcado de pila del kernel de Linux.También es texto una composición de caracteres imprimibles (con grafía) generados por un algoritmo de cifrado que, aunque no tienen sentido para cualquier persona, si puede ser descifrado por su destinatario texto claro original.
UN TEXTO ES UNA COMPOSICIÓN DE SIGNOS CODIFICADO EN UN SISTEMA DE ESCRITURA (COMO UN ALFABETO) QUE FORMA UNA UNIDAD DE SENTIDO. SU TAMAÑO PUEDE SER VARIABLE, DESDE UNA OBRA LITERARIA COMO "EL QUIJOTE" AL MENSAJE DE VOLCADO DE PILA DEL KERNEL DE LINUX.TAMBIÉN ES TEXTO UNA COMPOSICIÓN DE CARACTERES IMPRIMIBLES (CON GRAFÍA) GENERADOS POR UN ALGORITMO DE CIFRADO QUE, AUNQUE NO TIENEN SENTIDO PARA CUALQUIER PERSONA, SI PUEDE SER DESCIFRADO POR SU DESTINATARIO TEXTO CLARO ORIGINAL.
UN
IDA
D
-Usar columnas pequeñas para largos bloques de texto (entre 40 y 60 caracteres por línea). No debe exceder los 80 caracteres
tipografía digital
Un texto es una composición de signos codificado en un sistema de escritura (como un alfabeto) que forma una unidad de sentido. Su tamaño puede ser variable, desde una obra literaria como "El Quijote" al mensaje de volcado de pila del kernel de Linux.También es texto una composición de caracteres imprimibles (con grafía) generados por un algoritmo de cifrado.
Un texto es una composición de signos codificado en un sistema de escritura (como un alfabeto) que forma una unidad de sentido. Su tamaño puede ser variable, desde una obra literaria como "El Quijote" al mensaje de volcado de pila del kernel de Linux.También es texto una composición de caracteres imprimibles (con grafía) generados por un algoritmo de cifrado que, aunque no tienen sentido para cualquier persona, si puede ser descifrado por su destinatario texto claro original.
UN
IDA
D
Uno de los recursos textuales más trascendentes en la actualidad es el
hipertexto.
Es un tipo especial de texto, que contiene propiedades interactivas, con un funcionamiento muy similar al de un botón.
Dispone de su propia gramática (texto azul y subrayado).
tipografía digital
UN
IDA
D
http://sparror.cubecinema.com/rasha/58records/index.html
http://www.designworkscs.nl/information_design/index.html
Colores aditivosde la luz (para pantalla)
RGB (red, green, blue)(rojo, verde, azul)
Colores sustractivos de pigmentos (impresiónoffset)
CMYK(cyan, magenta, amarillo, negro)
color en medios digitales
RGBModelo básico para la visualización en pantalla, creado a partir de la mezcla de los
aditivos primarios (rojo, verde y azul)
Una desventaja de los RGB es que los colores no se visualizan de forma uniforme en todas las
pantallas, nace sRGBdesarrollado por HP y Microsoft, versión calibrada de RGB optimizada para casi todos los sistemas operativos, monitores y navegadores
Dabbs, Campbell, 2006
color en medios digitales
Barra de tonalidad
Hexadecimal (html. web)
RGBPrimarios aditivos, se subdividen en 256 niveles de 0 a 255
Saturación y brillo
color en medios digitales
Recomendaciones del uso del color en medios digitales:
-Usar un máximo de 5 colores. No abusar de este recurso
-Usar el color para agrupar elementos relacionados.
-Pensar en la psicología del color y los significados que posee en las diferentes culturas
- Tener una razón referencial
- Crear una afinidad con el contenido que representa.
color en medios digitales
http://www.yes-indeed.net/
tratamiento de imágenesLas imágenes destinada al medio electrónico estarán siempre limitadas a la resolución de la pantalla (en su mayoría 72 dpi)
Los dos formatos de archivo grafico más importantes son GIFy JPEG, pero en los últimos años el PNGse ha posicionado
GIF-Ideales para colores planos -Es el formato más usado en la web-Permite la transparencia.-Más livianos en peso.
JPEG-Ideales para imágenes fotográficas (millones de colores)
PNG-Fusiona características de GIF y JPEG (transparencia y millones de colores)-Muchos navegadores no reproducen correctamente este tipo de archivo
tratamiento de imágenesEn los medios digitales se pueden
utilizar iconos,
ilustracionessimples o complejas, imágenes
fotográficas,
diagramas,
infografías
http://www.platanoverde.com/platano_blog/revista.php
UN
IDA
D
http://www.yes-indeed.net/
http://www.carsten-ahrenholz.com/site/index.php
organización. visualización-No es posible predecir con exactitud cuál es el camino que el usuario seguirá durante su exploración visual de la
página, pero sí a qué zonas le presta mayor atención en su búsqueda:
12 3
4
4Hassan 2002. http://www.nosolousabilidad.com/articulos/como_leen_usuarios.htm
