diseño de la informacion
DESCRIPTION
TRANSCRIPT
![Page 1: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/1.jpg)
DiseñodelaInformación
![Page 2: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/2.jpg)
Patricio Rodríguez M.
Arquitectura de la Información
Diseño de la Información + Diseño de la Navegación
![Page 3: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/3.jpg)
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.
![Page 4: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/4.jpg)
Patricio Rodríguez M.
![Page 5: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/5.jpg)
Unbuendiseñodelainformación,desdeelpuntodevistaorganizativoydesuusabilidad,seráaquelqueayudealusuarioaencontrarlainformaciónquebuscadelaformamásfácil,rápidaycómodaposible.
![Page 6: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/6.jpg)
Patricio Rodríguez M.
![Page 7: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/7.jpg)
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.
![Page 8: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/8.jpg)
Patricio Rodríguez M.
![Page 9: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/9.jpg)
Laredaccióndeloscontenidosdeberealizarseenunlenguajeentendiblefácilmenteporlospotencialesusuariosdelsistema,huyendodetecnicismoscomplejos,abreviaturasinnecesariasoacrónimospococomunes.
![Page 10: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/10.jpg)
Patricio Rodríguez M.
![Page 11: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/11.jpg)
Patricio Rodríguez M.
Para facilitar la exploración de la información por parte del usuario debemos jerarquizarla:
![Page 12: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/12.jpg)
*Aumentandoeltamañodelostextosdemayorimportancia(títulos,subtítulos...)
![Page 13: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/13.jpg)
![Page 14: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/14.jpg)
*Agrupandolainformaciónqueestérelacionada
![Page 15: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/15.jpg)
![Page 16: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/16.jpg)
*Utilizandoefectostipográficos(negrita,cursiva...)paraenfatizarcontenidos
![Page 17: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/17.jpg)
![Page 18: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/18.jpg)
*Utilizandoelcontrasteenelcolorparadiscriminarydistribuirinformaciones
![Page 19: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/19.jpg)
![Page 20: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/20.jpg)
*Posicionandolainformaciónmásrelevanteenzonasvisualessuperiores.Sielusuarionoseveobligadoautilizarlabarradedesplazamientoparaencontrarlainformaciónquebusca(oelenlacequelellevehaciaella),ahorrarátiempoensubúsquedaytendrámásprobabilidadesdeencontrarla.
![Page 21: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/21.jpg)
![Page 22: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/22.jpg)
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.
![Page 23: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/23.jpg)
![Page 24: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/24.jpg)
ParadiseñarlanavegaciónpodemosusarelvocabulariográficopropuestoporJesseJamesGarrettparaladescripcióndelaarquitecturadelainformaciónyeldiseñodelainteracción:
http://www.jjg.net/ia/visvocab/spanish.html
![Page 25: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/25.jpg)
![Page 26: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/26.jpg)
Unavezdefinidalaarquitectura,debemosimplementarloselementosdeinteracciónennuestrohipermedia:enlaces,opcionesomenúsdenavegación,componentesdeinteracción(botones,cajasdetexto,....),etc.
![Page 27: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/27.jpg)
![Page 28: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/28.jpg)
estoesaloquedenominamosINTERFAZ
![Page 29: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/29.jpg)
¿Quéeslainterfaz?Cuandounousaunaherramienta,oaccedeeinteractúaconunsistema,suelehaber“algo”entreunomismoyelobjetodelainteracción.
Enunauto,ese“algo”sonlospedalesyeltablero.Enunapuerta,eselpicaporte.Enunamáquinaexpendedoraounascensor,losbotones.
![Page 30: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/30.jpg)
![Page 31: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/31.jpg)
![Page 32: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/32.jpg)
Este“algo”nosinformaquéaccionessonposibles,elestadoactualdelobjetoyloscambiosproducidos,ynospermiteactuarconosobreelsistemaolaherramienta.
![Page 33: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/33.jpg)
![Page 34: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/34.jpg)
Dadoquelasinterfacesnosonnuestroobjetivo,sinounmediodellegaraél,lamejorinterfazesaquellaquenoseve.Sinembargo,muchasdeellas,pornuevasydesconocidas,oporconocidasperomaldiseñadas,sonvisibles.
![Page 35: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/35.jpg)
![Page 36: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/36.jpg)
¿Cuántasvecesnoencuentranloquebuscanonosabencómohacerloquequieren?Esasituaciónresultadeunamalainterfaz,queasuvezgeneraunproblemadeusabilidad.
![Page 37: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/37.jpg)
![Page 38: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/38.jpg)
aquíesdondeseaplicalaarquitecturadelainformación
(primeraparte)
![Page 39: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/39.jpg)
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”
![Page 40: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/40.jpg)
![Page 41: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/41.jpg)
Louis Rosenfeld
Usa herramientas, técnicas y experiencias de disciplinas que ven la información como algo importante y valioso por si mismo.
![Page 42: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/42.jpg)
![Page 43: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/43.jpg)
¿cómotransformarlainformaciónencomunicación?
![Page 44: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/44.jpg)
ElementosdeAI
Sistemas de navegación
![Page 45: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/45.jpg)
ElementosdeAI
Sistemas de navegación
Sistemas de etiquetado
![Page 46: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/46.jpg)
ElementosdeAI
Sistemas de navegación
Sistemas de etiquetado
Sistemas de organización
![Page 47: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/47.jpg)
ElementosdeAI
Sistemas de navegación
Sistemas de etiquetado
Sistemas de organización
Sistemas de búsqueda
![Page 48: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/48.jpg)
MapadeNavegaciónUnmapadenavegacióneslarepresentacióngráficadelaorganizacióndelainformacióndeunaestructuraweb.Expresatodaslasrelacionesdejerarquíaysecuenciaypermiteelaborarescenariosdecomportamientodelosusuarios.
![Page 49: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/49.jpg)
![Page 50: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/50.jpg)
HipertextoEnriqueceruncontenidopormediodelusodeetiquetasqueotorguenunvalorsemánticoalainformación.
![Page 51: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/51.jpg)
<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>
Escritura hipertextual
![Page 52: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/52.jpg)
WireframesUnwireframeesunbosquejodelaubicacióndeelementosenunapantalla.
![Page 53: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/53.jpg)
![Page 54: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/54.jpg)
WireframesUnwireframegraficabásicamente:Elementosdenavegación:menús,accesosdirectose
hipervínculos.Elementosdeinformación:contenidosdetextoeimágenes.Elementosdeinteracción:herramientasofuncionalidades
queelusuariopuederealizar.Elementosdeapoyo:ítemsdeayudayorientación,como
mapasdenavegaciónofaqs.Elementospromocionales:espaciodedicadoabanners
publicitariosoadestacadosinternosdelpropioproducto.
![Page 55: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/55.jpg)
![Page 56: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/56.jpg)
![Page 57: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/57.jpg)
SistemadebúsquedaInvolucratodaslasrelacionescausa/efecto,identificalasvariablesrelevantesqueintervienenypermiteanticiparescenariosycontrolarsuejecución,previoaldesarrollodeunproducto.
![Page 58: DiseñO De La Informacion](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54957214ac7959092e8b4e69/html5/thumbnails/58.jpg)