Download - DiseñO De La Informacion
DiseñodelaInformación
Patricio Rodríguez M.
Arquitectura de la Información
Diseño de la Información + Diseño de la Navegación
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.
Patricio Rodríguez M.
Unbuendiseñodelainformación,desdeelpuntodevistaorganizativoydesuusabilidad,seráaquelqueayudealusuarioaencontrarlainformaciónquebuscadelaformamásfácil,rápidaycómodaposible.
Patricio Rodríguez M.
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.
Patricio Rodríguez M.
Laredaccióndeloscontenidosdeberealizarseenunlenguajeentendiblefácilmenteporlospotencialesusuariosdelsistema,huyendodetecnicismoscomplejos,abreviaturasinnecesariasoacrónimospococomunes.
Patricio Rodríguez M.
Patricio Rodríguez M.
Para facilitar la exploración de la información por parte del usuario debemos jerarquizarla:
*Aumentandoeltamañodelostextosdemayorimportancia(títulos,subtítulos...)
*Agrupandolainformaciónqueestérelacionada
*Utilizandoefectostipográficos(negrita,cursiva...)paraenfatizarcontenidos
*Utilizandoelcontrasteenelcolorparadiscriminarydistribuirinformaciones
*Posicionandolainformaciónmásrelevanteenzonasvisualessuperiores.Sielusuarionoseveobligadoautilizarlabarradedesplazamientoparaencontrarlainformaciónquebusca(oelenlacequelellevehaciaella),ahorrarátiempoensubúsquedaytendrámásprobabilidadesdeencontrarla.
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.
ParadiseñarlanavegaciónpodemosusarelvocabulariográficopropuestoporJesseJamesGarrettparaladescripcióndelaarquitecturadelainformaciónyeldiseñodelainteracción:
http://www.jjg.net/ia/visvocab/spanish.html
Unavezdefinidalaarquitectura,debemosimplementarloselementosdeinteracciónennuestrohipermedia:enlaces,opcionesomenúsdenavegación,componentesdeinteracción(botones,cajasdetexto,....),etc.
estoesaloquedenominamosINTERFAZ
¿Quéeslainterfaz?Cuandounousaunaherramienta,oaccedeeinteractúaconunsistema,suelehaber“algo”entreunomismoyelobjetodelainteracción.
Enunauto,ese“algo”sonlospedalesyeltablero.Enunapuerta,eselpicaporte.Enunamáquinaexpendedoraounascensor,losbotones.
Este“algo”nosinformaquéaccionessonposibles,elestadoactualdelobjetoyloscambiosproducidos,ynospermiteactuarconosobreelsistemaolaherramienta.
Dadoquelasinterfacesnosonnuestroobjetivo,sinounmediodellegaraél,lamejorinterfazesaquellaquenoseve.Sinembargo,muchasdeellas,pornuevasydesconocidas,oporconocidasperomaldiseñadas,sonvisibles.
¿Cuántasvecesnoencuentranloquebuscanonosabencómohacerloquequieren?Esasituaciónresultadeunamalainterfaz,queasuvezgeneraunproblemadeusabilidad.
aquíesdondeseaplicalaarquitecturadelainformación
(primeraparte)
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”
Louis Rosenfeld
Usa herramientas, técnicas y experiencias de disciplinas que ven la información como algo importante y valioso por si mismo.
¿cómotransformarlainformaciónencomunicación?
ElementosdeAI
Sistemas de navegación
ElementosdeAI
Sistemas de navegación
Sistemas de etiquetado
ElementosdeAI
Sistemas de navegación
Sistemas de etiquetado
Sistemas de organización
ElementosdeAI
Sistemas de navegación
Sistemas de etiquetado
Sistemas de organización
Sistemas de búsqueda
MapadeNavegaciónUnmapadenavegacióneslarepresentacióngráficadelaorganizacióndelainformacióndeunaestructuraweb.Expresatodaslasrelacionesdejerarquíaysecuenciaypermiteelaborarescenariosdecomportamientodelosusuarios.
HipertextoEnriqueceruncontenidopormediodelusodeetiquetasqueotorguenunvalorsemánticoalainformación.
<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
WireframesUnwireframeesunbosquejodelaubicacióndeelementosenunapantalla.
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.
SistemadebúsquedaInvolucratodaslasrelacionescausa/efecto,identificalasvariablesrelevantesqueintervienenypermiteanticiparescenariosycontrolarsuejecución,previoaldesarrollodeunproducto.