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.