Page 1

taller multimedia - 04 arquitectura de la informaci贸n


La tecnologĂ­a es fundamental, pero insuficiente.


Una buena experiencia de usuario se produce cuando una persona puede comprender un sistema


Cuando un sistema no es usable, el usuario se confunde, se frustra y se culpa a sĂ­ mismo.


La Arquitectura de la Informaci贸n es la disciplina que se ocupa de este proceso, que apunta a dise帽ar una buena experiencia de usuario en sistemas electr贸nicos.


arquitectura de la informaci贸n

Crear y estructurar patrones b谩sicos o inherentes de datos digitales y virtuales en el espacio de la WWW


Clarificar la misi贸n y visi贸n del sitio, equilibrando las necesidades de la organizaci贸n y las del p煤blico.


Determina que contenido y funcionalidad tendr谩 el sitio o aplicaci贸n.


Define los sistemas de organización, jerarquía, navegación, rotulado, búsqueda y recuperación de información


organización secciones jerarquía títulos, textos navegación menúes rotulado descriptores búsqueda buscadores, tags


menúes títulos, textos descriptores secciones


recuperaci贸n de informaci贸n


Proyecta el modo en que el sitio se adaptarĂĄ al cambio y al crecimiento a travĂŠs del tiempo.


"Independientemente de cuál sea su intención, los arquitectos de la información buscan patrones, luego crean mapas o proyectos originales para ayudar a la gente a alcanzar sus metas a través de las interfaces. "Jeffrey Veen (2001)


la experiencia del usuario


esqueleto

concreto

estructura alcance estrategia

abstracto


The Elements of User Experience

Jesse James Garrett jjg@jjg.net

A basic duality: The Web was originally conceived as a hypertextual information space; but the development of increasingly sophisticated front- and back-end technologies has fostered its use as a remote software interface. This dual nature has led to much confusion, as user experience practitioners have attempted to adapt their terminology to cases beyond the scope of its original application. The goal of this document is to define some of these terms within their appropriate contexts, and to clarify the underlying relationships among these various elements.

Interface Design: as in traditional HCI: design of interface elements to facilitate user interaction with functionality Information Design: in the Tuftean sense: designing the presentation of information to facilitate understanding

Navigation Design: design of interface elements to facilitate the user's movement through the information architecture Information Design: in the Tuftean sense: designing the presentation of information to facilitate understanding

Interface Design Navigation Design

Information Design Interaction Information Design Architecture

Interaction Design: development of application flows to facilitate user tasks, defining how the user interacts with site functionality

Functional Content Specifications Requirements

Functional Specifications: "feature set": detailed descriptions of functionality the site must include in order to meet user needs User Needs: externally derived goals for the site; identified through user research, ethno/techno/psychographics, etc. Site Objectives: business, creative, or other internally derived goals for the site

Information Architecture: structural design of the information space to facilitate intuitive access to content Content Requirements: definition of content elements required in the site in order to meet user needs User Needs: externally derived goals for the site; identified through user research, ethno/techno/psychographics, etc. Site Objectives: business, creative, or other internally derived goals for the site

User Needs Site Objectives Abstract

Web as hypertext system Visual Design: visual treatment of text, graphic page elements and navigational components

Visual Design

Visual Design: graphic treatment of interface elements (the "look" in "look-and-feel")

task-oriented

Completion

Concrete

time

Web as software interface

30 March 2000

Conception

information-oriented

This picture is incomplete: The model outlined here does not account for secondary considerations (such as those arising during technical or content development) that may influence decisions during user experience development. Also, this model does not describe a development process, nor does it define roles within a user experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today. Š 2000 Jesse James Garrett

http://www.jjg.net/ia/


dise単o visual dise単o de informacion dise単o de interaccci坦n funcionalidades necesidades de usuario


herramientas


1. Técnicas de interacción con el usuario: Reunión, entrevista y encuesta, diseño de escenarios y diseño participativo.


2.T茅cnicas de interacci贸n con el contexto: Evaluaci贸n de productos similares y An谩lisis de la Competencia (benchmarking).


3.Técnicas matemáticas (co-ocurrencia): Organización de tarjetas (card sorting) y Análisis de Secuencia.


[La técnica de 'card sorting' se basa en la observación de cómo los usuarios agrupan y asocian entre sí un número predeterminado de tarjetas etiquetadas con las diferentes categorías temáticas del sitio web.] De esta forma, partiendo del comportamiento de los propios usuarios, es posible organizar y clasificar la información de un sitio web conforme a su modelo mental.

http://www.nosolousabilidad.com/articulos/cardsorting_unicauca.htm http://www.boxesandarrows.com/view/card_sorting_a_definitive_guide


[El Análisis de Secuencia consiste en la realización de una serie de pruebas a usuarios potenciales del producto, y el posterior análisis cualitativo y cuantitativo de esos resultados; para ayudar a definir la secuencia de las etiquetas en el producto electrónico.] En el card sorting el objetivo es definir cuáles serán las agrupaciones de las etiquetas y en el Análisis de Secuencia se define el orden que van a tener las mismas. http://www.nosolousabilidad.com/articulos/analisis_secuencia.htm


4. T茅cnicas de representaci贸n de informaci贸n 4.1 Blueprints 4.2 Wireframes 4.3 Mockups


Estos planos o blueprints parten de lo general a lo particular, de lo abstracto a lo concreto. Su funci贸n es explicitar iterativamente las decisiones de dise帽o, con el objetivo de comunicar dichas decisiones al resto de miembros del equipo de desarrollo, o al cliente final.


http://www.jjg.net/ia/visvocab/spanish.html


Portal Web Escuela de Diseño - Arquitectura de la Información - Blueprint General

homepage Portal

Login

Items Homepage

0

Menu General

Acerca de

2

historia

Proyectos

Organigrama

Contacto

3

Usuarios

Alumnos

Docentes

Administrativ os

Admisión

Carrerras

4

5

Noticias

6

Galería

Weblog

Empresas BLOG

Carrera en cada sede

Cuerpo Docente

Proyectos

Eventos

Galería

Homepage Carreras

Malla Curricular

Extensión

ShowcaseGalería

Noticias

Proyectos

Noticias

7

Eventos


3

Carrerras

4

5

Noticias

6

Galería

Weblog

s BLOG

Carrera en cada sede

Cuerpo Docente

Proyectos

Eventos

Galería

Homepage Carreras

Malla Curricular

Extensión

ShowcaseGalería

Noticias

Proyectos

Noticias

7

Eventos


*(!+#!

1

--0+!-%*-

*-/!.

7.,0! 

-!#0)/. -!0!)/!.

*)//*

0 !)7 !)!-' 9%) %-/0'

*(0)% 

0%6)

<;A6;M.2; 9%) %-/0'

$?<4?.:..9 1J.0<;@C.9

<;A6;M.2;

0%6)

.:=.K. 4B.'.;.

(.992?2@

0%4)!. .*(*.

30 

ABA<?6.92@ =H46;.@

%

9<@.?6<

.:=?2@.

6?20A<?6<

.A.?63. ./<92A. 9:2161<? <;7B;A<@./6A.06<;.92@ <;@27<@@C.9

'B/@616< 4B.=<A./92

&.FL;@<06.9

S?2.12 <;02@6L;

6?<E 0A6C61.1

2?A6R0.06L;

$?<E20A<@

696.94B.@29 ).992

'#'

606A.06<;2@

4 !./ *.+./%'.

9%) %-/0'

0%6) #/?.@ !.E<?2@

*#%)

#/?2@ :2;<?2@

<;@B9A<?J.@

;@=2006<;2@

'B:6;6@A?<@

#A?<@ '2?C606<@

#R06;. B@B.?6<@;< 9<4B2.1<@ =H46;.@ ??<? #R06;.@<:2?06.92@ B4.?2@E:216<@12=.4< (.?63.@ "B2C<0962;A21<:60696.?6< ;B2C<0962;A2B?/.;6F.1<? <?:B9.?6<@ $?<0216:62;A<@

.=960.06L; <R06;.C6?AB.9

94B.

D=2?6:2;A<@

$6;A.0<; @C.9

6@A<?62A.@

;3<?:.06L; .9 ;C2?@6<;6@A.

)612<@

!.;B.912 :.;27<12 ;C2?@6<;2@ 126;A2?I@

$?<=621.1

3 */%%.

'2006L; ;<A606.@ <0B:2;A<@

2

!2:<?6. --0.!'

96;8@. 0<;A2;61< 0?JA60<

)612< ;@A6AB06<;.9

$?206<12 .006L;

6C612;1<@

</62?;< <?=<?.A6C<

6;8@12 BA6961.1


0 !)7 !)!-' 9%) %-/0'

*(0)% 

0%6)

<;A6;M.2; 9%) %-/0'

$?<4?.:..9 1J.0<;@C.9

<;A6;M.2;

0%6)

.:=.K. 4B.'.;.

(.992?2@

0%4)!. .*(*.

30 

ABA<?6.92@ =H46;.@

%

9<@.?6<

.:=?2@.

6?20A<?6<

.A.?63. ./<92A. 9:2161<? <;7B;A<@./6A.06<;.92@ <;@27<@@C.9

'B/@616< 4B.=<A./92

&.FL;@<06.9

S?2.12 <;02@6L;

6?<E 0A6C61.1

$?<E20A<@

696.94B.@29 ).992

'#'

606A.06<;2@

4 !./ *.+./%'.

9%) %-/0'

0%6) #/?.@ !.E<?2@

*#%)

#/?2@ :2;<?2@

<;@B9A<?J.@

#R06;. B@B.?6<@;< 9<4B2.1<@ =H46;.@ ??<? #R06;.@<:2?06.92@ B4.?2@E:216<@12=.4< (.?63.@ "B2C<0962;A21<:60696.?6< ;B2C<0962;A2B?/.;6F.1<? <?:B9.?6<@ $?<0216:62;A<@

.=960.06L; <R06;.C6?AB.9

94B.

D=2?6:2;A<@

$6;A.0<; @C.9

6@A<?62A.@

;3<?:.06L; .9 ;C2?@6<;6@A.

)612<@

!.;B.912 :.;27<12 ;C2?@6<;2@ 126;A2?I@

$?<=621.1

3 */%%.

'2006L; ;<A606.@ <0B:2;A<@

2

!2:<?6. --0.!'

96;8@. 0<;A2;61< 0?JA60<

)612< ;@A6AB06<;.9

$?206<12 .006L;

6C612;1<@

;


Los Wireframes son una representación esquemática de una página web sin elementos gráficos que muestran contenido y comportamiento de las páginas. Sirven como herramienta de comunicación y discusión entre arquitectos de información, programadores, diseñadores y clientes.


WireFrames Arquitectura de la Informaci贸n Desarrollo Portal Web Escuela de Dise帽o DuocUC Jorge Barrera

2.0


Homepage Portal 0

Acerca de

Historia

Proyectos Escuela

Organigrama

Contacto

Se agrega a petición del equipo el texto proyectos escuela

Mapa del sitio

Logo Escuela 1 2

This is where the section help text would go. It should be brief but informative and describe the fields that are in the following section.

This is where the section help text would go. It should be brief but informative and describe the fields that are in the following section. Alumnos

Docentes

Diseño Ambientes

Administrativos

Diseño Gráfico

Admisión

Diseño Industrial

Texto descriptivo escuela

Empresa Diseño de Vestuario

Tipos de usuarios que llevan a una página dedicada Técnico en Diseño Gráfico

Ilustración Digital

Menu de carreras: Este podría llevar directamente al home de carreras o tener un menu propio

3

Noticias

Galería This is where the section help text would go. It should be brief but informative and describe the fields that are in the following section. This is where the section help text would go. It should be brief but informative and describe the fields that are in the following section.

4

This is where the section help text would go. It should be brief but informative and describe the fields that are in the following section.

Weblog This is where the section help 6

8

text would go. It should be brief but informative and describe the fields that are in the following section.

5

This is where the section help text would go. It should be brief but informative and

Eventos Art Center at Night Open House Aug 13, 2008 7:00--9:00 p.m. Summer 2008 Graduation Events Aug 14, 2008 - Aug 16, 2008 Toyota Lecture Series: Jeffrey VeenSep 25, 2008 7:30 p.m.

Pie links Institucionales

La noticias se estractaran de las noticias por carrera. La galería de igual modo hace un llamado de el showcase de cada carrera

legal escuela

7

Weblog de la escuela, se dirige a una sitio propio Enventos es un calendario que también se maneja por cada carrera y centralmente

Gonzalo Fuentes realizó observación sobre orden de las carreras - Se cambia a alfabético - Manteniendo las carreas técnicas separadas


&257(6

68&856$/(6

35(*817$6)5(&8(17(6

%Ô648('$

1

(QYLDU

$FFHVR&OLHQWH 5XW

(69$/ &RQWUDVHxD

2ILFLQD9LUWXDO

&RPXQLGDG

(GXFDFLyQ

$\XGD

(QYLDU

/D(PSUHVD

¢2OYLGRVXFODYH"_5HJLVWUDUPH

3 1RWLFLDV

2

'tD0XQGLDOGHO&RQVXPLGRU

7tWXOR ,QWHJHUVLWDPHWIHOLV3UDHVHQWYLWDH GRORUVLWDPHWOHFWXVLQWHUGXP ODRUHHW1XOODPWULVWLTXHDOLTXHW MXVWR3KDVHOOXVPDXULVPLYHKLFXOD DWUKRQFXVLQKHQGUHULWVHGDUFX

GH(QHURGHO

,QWHJHUVLWDPHWIHOLV3UDHVHQWYLWDHGRORUVLW DPHWOHFWXVLQWHUGXPODRUHHW1XOODPWULVWLTXH DOLTXHWMXVWR3KDVHOOXVPDXULVPLYHKLFXODDW UKRQFXVLQKHQGUHULWVHGDUFX >@0iV,QIRUPDFLyQ

0HVDV%DUULDOHV GH(QHURGHO

,QWHJHUVLWDPHWIHOLV3UDHVHQWYLWDHGRORUVLW DPHWOHFWXVLQWHUGXPODRUHHW1XOODPWULVWLTXH DOLTXHWMXVWR3KDVHOOXVPDXULVPLYHKLFXODDW UKRQFXVLQKHQGUHULWVHGDUFX >@0iV,QIRUPDFLyQ



 

)LHVWDGHO$JXDGH6DQ)HOLSH





GH(QHURGHO

,QWHJHUVLWDPHWIHOLV3UDHVHQWYLWDHGRORUVLW DPHWOHFWXVLQWHUGXPODRUHHW1XOODPWULVWLTXH DOLTXHWMXVWR3KDVHOOXVPDXULVPLYHKLFXODDW UKRQFXVLQKHQGUHULWVHGDUFX











>@0iV,QIRUPDFLyQ

4

7ZLWWHU#HVYDOBFKLOH (VYDOVHSRQHFRQODURMDSDUDVXVFOLHQWHV KWWSELWO\E6/[' *UDFLDV#SUDPLUH]W+XERXQDURWXUDGH PDWUL]HQHOVHFWRU\QXHVWURVHTXLSRV WUDEDMDQHQWHUUHQRSDUDUHSRQHUVHUYLFLRD ODEUHYHGDG

2ILFLQD9LUWXDO

(GXFDFLyQ

,QWHJHUVLWDPHWIHOLV3UDHVHQWYLWDHGRORUVLW DPHWOHFWXVLQWHUGXPODRUHHW1XOODPWULVWLTXH DOLTXHWMXVWR3KDVHOOXVPDXULVPLYHKLFXODDW UKRQFXVLQKHQGUHULWVHGDUFX

,QWHJHUVLWDPHWIHOLV3UDHVHQWYLWDHGRORUVLW DPHWOHFWXVLQWHUGXPODRUHHW1XOODPWULVWLTXH DOLTXHWMXVWR3KDVHOOXVPDXULVPLYHKLFXODDW UKRQFXVLQKHQGUHULWVHGDUFX

)RQR6HUYLFLR  KRUDVDOGtDGtDVDODVHPDQD

)RQR&RPHUFLDO  /XQ9LH_6DE

*UDFLDV#DPLJRVB(IHFWLYDPHQWH GHWHFWDPRVXQDURWXUDGHPDWUL]HQHO VHFWRU6DQ,VLGUR\HVWDPRVWUDEDMDQGRHQ VXUHSDUDFLyQ 0DPiVGH3XWDHQGRYLVLWDQODEDKtDGH 9DOSDUDtVRMXQWRD/DVJRWLWDVGH(VYDO KWWSELWO\EG7='

7RGRVORVGHUHFKRVUHVHUYDGRV &RFKUDQH1ž9DOSDUDtVR7HOpIRQR  )D[  

0


El Mockup es un prototipo visual que incluye una propuesta de diseĂąo que integra la mayorĂ­a de las variables.


1

CORTES

SUCURSALES

PREGUNTAS FRECUENTES

Buscar

BÚSQUEDA

2

ACCESO CLIENTE

Rut Contraseña Oficina Virtual

Comunidad

Educación

3 Noticias DÍA MUNDIAL DEL CONSUMIDOR

Ayuda

La Empresa

¿Olvido su clave? | Registrarme

a

Ingresar

Solicitamos $'HğQLUODVIRWRV\WH[WRVSDUDHOFDUUXVHO %'HğQLUORVWH[WRV,QWURGXFWRULRVDFDGDVHFFLöQ

El agua

19 de Enero del 2010

El agua es un recurso natural esencial para el desarrollo de diferentes formas de vida que existen en el planeta tierra.

Integer sit amet felis. Praesent vitae dolor sit amet lectus interdum laoreet. Nullam tristique aliquet justo. Phasellus mauris mi, vehicula at, rhoncus in, hendrerit sed, arcu. [+] Más Información

Si quieres obtener mayor información sobre el agua visita la sección educación.

MESAS BARRIALES 19 de Enero del 2010

Integer sit amet felis. Praesent vitae dolor sit amet lectus interdum laoreet. Nullam tristique aliquet justo. Phasellus mauris mi, vehicula at, rhoncus in, hendrerit sed, arcu. [+] Más Información

1

2

3

4

5

4 Esval se pone con la roja para sus clientes http://bit.ly/b2SLxD Gracias @ pramirezt . Hubo una rotura de matriz en el sector y nuestros equipos trabajan en terreno para reponer servicio a la brevedad.

B

Oficina Virtual

Educación

Certificación ISO

Integer sit amet felis. Praesent vitae dolor sit amet lectus interdum laoreet. Nullam tristique aliquet justo. Phasellus mauris mi, vehicula at, rhoncus in, hendrerit sed, arcu.

Integer sit amet felis. Praesent vitae dolor sit amet lectus interdum laoreet. Nullam tristique aliquet justo. Phasellus mauris mi, vehicula at, rhoncus in, hendrerit sed, arcu.

Integer sit amet felis. Praesent vitae dolor sit amet lectus interdum laoreet. Nullam tristique aliquet justo. Phasellus mauris mi, vehicula at, rhoncus in, hendrerit sed, arcu.

Fono Servicio 600 600 60 60 24 horas al día / 7 días a la semana

Fono Comercial 600 555 20 20 Lun / Vie 8:30-18:00 | Sab 8:30-14:00

Correcciones 5HGXFFLöQGHODOWRGHFDEHFHUD 5HGXFFLöQGHWDPDòRGHO/RJLQ 6HYLVXDOL]DQVRORQRWLFLDV 6HDJUHJDXQDFROXPQDUHODFLRQDGDFRQODV FHUWLğFDFLRQHV,62GHODHPSUHVD

Gracias @ amigos_1979. Efectivamente detectamos una rotura de matriz en el sector San Isidro y estamos trabajando en su

V bit.ly/bdTZ4D

2010. Todos los derechos reservados Cochrane Nº 751, Valparaíso. Teléfono (32) 2209 000. Fax: (32) 2209 502

http://


Propuesta Institucional

! Estandarización de la retícula. ! Uso de las Normas Gráficas asociadas a la Escuela. ! Uso y aplicación del estudio de referentes. ! Aplicación de las observaciones de la encuesta a Directores de Carrera


Propuesta Institucional

! Estandarización de la retícula. ! Uso de las Normas Gráficas asociadas a la Escuela. ! Uso y aplicación del estudio de referentes. ! Aplicación de las observaciones de la encuesta a Directores de Carrera

04 - AI-2010  

taller multimedia - 04 arquitectura de la información La tecnología es fundamental, pero insuficiente. Una buena experiencia de usuario se pr...

Read more
Read more
Similar to
Popular now
Just for you