DiseñO De La Informacion
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

DiseñO De La Informacion

on

  • 1,528 views

 

Statistics

Views

Total Views
1,528
Views on SlideShare
1,433
Embed Views
95

Actions

Likes
2
Downloads
98
Comments
0

4 Embeds 95

http://tallerhipermedia.wordpress.com 75
http://www.weebly.com 14
http://bluowl-painting.weebly.com 5
http://vpereiro.wordpress.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

DiseñO De La Informacion Presentation Transcript

  • 1. Diseño
de
la
Información

  • 2. Patricio Rodríguez M. Arquitectura de la Información Diseño de la Información + Diseño de la Navegación
  • 3. Patricio Rodríguez M. INFORMACION El usuario, ante un nodo (por ejemplo, una página web), realiza un barrido visual de éste, ojeando "a saltos" la pantalla, discriminando automáticamente la información que no le interesa y centrando su atención en la que si.
  • 4. Patricio Rodríguez M.
  • 5. Un
buen
diseño
de
la
información,
desde
el
 punto
de
vista
organizativo
y
de
su
 usabilidad,
será
aquel
que
ayude
al
usuario
a
 encontrar
la
información
que
busca
de
la
 forma
más
fácil,
rápida
y
cómoda
posible.

  • 6. Patricio Rodríguez M.
  • 7. Patricio Rodríguez M. No lo hagas! Uno de los aspectos más importantes en el diseño de la información es evitar la sobrecarga informativa: demasiada información (textual, visual...) en un mismo nodo confunde y agota al usuario.
  • 8. Patricio Rodríguez M.
  • 9. La
redacción
de
los
contenidos
debe
realizarse
 en
un
lenguaje
entendible
fácilmente
por
los
 potenciales
usuarios
del
sistema,
huyendo
de
 tecnicismos
complejos,
abreviaturas
 innecesarias
o
acrónimos
poco
comunes.

  • 10. Patricio Rodríguez M.
  • 11. Patricio Rodríguez M. Para facilitar la exploración de la información por parte del usuario debemos jerarquizarla:
  • 12. 
*
Aumentando
el
tamaño
de
los
 textos
de
mayor
importancia
 (títulos,
subtítulos...)

  • 13. *
Agrupando
la
 información
que
esté
 relacionada

  • 14. *
Utilizando
efectos
tipográficos
 (negrita,
cursiva...)
para
enfatizar
 contenidos

  • 15. *
Utilizando
el
contraste
en
 el
color
para
discriminar
y
 distribuir
informaciones

  • 16. *
Posicionando
la
información
más
relevante
en
 zonas
visuales
superiores.
Si
el
usuario
no
se
 ve
obligado
a
utilizar
la
barra
de
 desplazamiento
para
encontrar
la
 información
que
busca
(o
el
enlace
que
le
 lleve
hacia
ella),
ahorrará
tiempo
en
su
 búsqueda
y
tendrá
más
probabilidades
de
 encontrarla.

  • 17. Patricio Rodríguez M. NAVEGACION El diseño de la navegación consiste en definir la arquitectura de nuestro hipermedia: elementos de interacción entre el usuario y el sistema, enlaces y tipos de enlaces entre los nodos, agrupación de los nodos por categorías o propiedades, y respuestas del sistema ante peticiones del usuario.
  • 18. Para
diseñar
la
navegación
podemos
usar
el
 vocabulario
gráfico
propuesto
por
Jesse
 James
Garrett
para
la
descripción
de
la
 arquitectura
de
la
información
y
el
diseño
 de
la
interacción:
 http://www.jjg.net/ia/visvocab/spanish.html

  • 19. Una
vez
definida
la
arquitectura,
debemos
 implementar
los
elementos
de
interacción
 en
nuestro
hipermedia:
enlaces,
opciones
 o
menús
de
navegación,
componentes
de
 interacción
(botones,
cajas
de
texto,
....),
 etc.

  • 20. esto
es
a
lo
que
 denominamos
INTERFAZ

  • 21. ¿Qué
es
la
interfaz?
 Cuando
uno
usa
una
herramienta,
o
accede
e
 interactúa
con
un
sistema,
suele
haber
“algo”
 entre
uno
mismo
y
el
objeto
de
la
interacción.
 En
un
auto,
ese
“algo”
son
los
pedales
y
el
 tablero.
En
una
puerta,
es
el
picaporte.
En
 una
máquina
expendedora
o
un
ascensor,
los
 botones.


  • 22. Este
“algo”
nos
informa
qué
 acciones
son
posibles,
el
estado
 actual
del
objeto
y
los
cambios
 producidos,
y
nos
permite
actuar
 con
o
sobre
el
sistema
o
la
 herramienta.

  • 23. Dado
que
las
interfaces
no
son
nuestro
 objetivo,
sino
un
medio
de
llegar
a
él,
la
 mejor
interfaz
es
aquella
que
no
se
ve.
Sin
 embargo,
muchas
de
ellas,
por
nuevas
y
 desconocidas,
o
por
conocidas
pero
mal
 diseñadas,
son
visibles.

  • 24. ¿Cuántas
veces
no
encuentran
lo
 que
buscan
o
no
saben
cómo
 hacer
lo
que
quieren?
Esa
 situación
resulta
de
una
mala
 interfaz,
que
a
su
vez
genera
un
 problema
de
usabilidad.

  • 25. aquí
es
donde
se
 aplica
la
arquitectura
 de
la
información
 (primera
parte)

  • 26. Jesse James Garrett (www.jjg.net) Define como las personas procesan la información y construye relaciones entre sus diferentes elementos. “Usar un sitio web por primera vez, es tan penoso como salir con una niña que no conoces”
  • 27. Louis Rosenfeld Usa herramientas, técnicas y experiencias de disciplinas que ven la información como algo importante y valioso por si mismo.
  • 28. ¿cómo
transformar
 la
información
en
 comunicación?

  • 29. Elementos
de
AI
 Sistemas de navegación
  • 30. Elementos
de
AI
 Sistemas de navegación Sistemas de etiquetado
  • 31. Elementos
de
AI
 Sistemas de navegación Sistemas de etiquetado Sistemas de organización
  • 32. Elementos
de
AI
 Sistemas de navegación Sistemas de Sistemas de búsqueda etiquetado Sistemas de organización
  • 33. Mapa
de
Navegación
 Un
mapa
de
navegación
es
la
representación
gráfica
 de
la
organización
de
la
información
de
una
 estructura
web.
Expresa
todas
las
relaciones
de
 jerarquía
y
secuencia
y
permite
elaborar
 escenarios
de
comportamiento
de
los
usuarios.

  • 34. Hipertexto
 Enriquecer
un
contenido
por
medio
del
uso
de
 etiquetas
que
otorguen
un
valor
semántico
a
la
 información.



  • 35. Escritura hipertextual <html> <h1>esto es un título principal</h1> <p>esto es un párrafo</p> <a href=”http://www.google.cl”>esto es un link</a> </html>
  • 36. Wireframes
 Un
wireframe
es
un
bosquejo
de
la
ubicación
de
 elementos
en
una
pantalla.

  • 37. Wireframes
 Un
wireframe
grafica
básicamente:
 Elementos
de
navegación:
menús,
accesos
directos
e
 hipervínculos.
 Elementos
de
información:
contenidos
de
texto
e
imágenes.
 Elementos
de
interacción:
herramientas
o
funcionalidades
 que
el
usuario
puede
realizar.
 Elementos
de
apoyo:
ítems
de
ayuda
y
orientación,
como
 mapas
de
navegación
o
faqs.
 Elementos
promocionales:
espacio
dedicado
a
banners
 publicitarios
o
a
destacados
internos
del
propio
producto.

  • 38. Sistema
de
búsqueda
 Involucra
todas
las
relaciones
causa/efecto,
 identifica
las
variables
relevantes
que
intervienen
 y
permite
anticipar
escenarios
y
controlar
su
 ejecución,
previo
al
desarrollo
de
un
producto.