04 - AI-2010 by Taller de Simulación

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. "Jeﬀrey 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

Items Homepage

Menu General

Acerca de

historia

Proyectos

Organigrama

Contacto

Usuarios

Alumnos

Docentes

Administrativ os

Admisión

Carrerras

Noticias

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

Eventos

Carrerras

Noticias

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

Eventos

*(!+ #!

-- 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)!. .*(*.

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.9 4B.@ 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;A2 1<:60696.?6< ;B2C< 0962;A2 B?/.;6F.1<? <?:B9.?6<@ $?<0216:62;A<@

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

9 4B.

D=2?6:2;A<@

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

6@A<?62A.@

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

)612<@

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

$?<=621.1

3 */% % .

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

!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)!. .*(*.

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.9 4B.@ 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;A2 1<:60696.?6< ;B2C< 0962;A2 B?/.;6F.1<? <?:B9.?6<@ $?<0216:62;A<@

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

9 4B.

D=2?6:2;A<@

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

6@A<?62A.@

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

)612<@

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

$?<=621.1

3 */% % .

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

!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

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

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.

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

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

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

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('$

(QYLDU

$FFHVR &OLHQWH 5XW

(69$/ &RQWUDVHxD

2ILFLQD 9LUWXDO

&RPXQLGDG

(GXFDFLyQ

$\XGD

(QYLDU

/D (PSUHVD

¢2OYLGR VX FODYH" _ 5HJLVWUDUPH

3 1RWLFLDV

'tD 0XQGLDO GHO &RQVXPLGRU

7tWXOR ,QWHJHU VLW DPHW IHOLV 3UDHVHQW YLWDH GRORU VLW DPHW OHFWXV LQWHUGXP ODRUHHW 1XOODP WULVWLTXH DOLTXHW MXVWR 3KDVHOOXV PDXULV PL YHKLFXOD DW UKRQFXV LQ KHQGUHULW VHG DUFX

GH (QHUR GHO

,QWHJHU VLW DPHW IHOLV 3UDHVHQW YLWDH GRORU VLW DPHW OHFWXV LQWHUGXP ODRUHHW 1XOODP WULVWLTXH DOLTXHW MXVWR 3KDVHOOXV PDXULV PL YHKLFXOD DW UKRQFXV LQ KHQGUHULW VHG DUFX > @ 0iV ,QIRUPDFLyQ

0HVDV %DUULDOHV GH (QHUR GHO

,QWHJHU VLW DPHW IHOLV 3UDHVHQW YLWDH GRORU VLW DPHW OHFWXV LQWHUGXP ODRUHHW 1XOODP WULVWLTXH DOLTXHW MXVWR 3KDVHOOXV PDXULV PL YHKLFXOD DW UKRQFXV LQ KHQGUHULW VHG DUFX > @ 0iV ,QIRUPDFLyQ

)LHVWD GHO $JXD GH 6DQ )HOLSH

GH (QHUR GHO

,QWHJHU VLW DPHW IHOLV 3UDHVHQW YLWDH GRORU VLW DPHW OHFWXV LQWHUGXP ODRUHHW 1XOODP WULVWLTXH DOLTXHW MXVWR 3KDVHOOXV PDXULV PL YHKLFXOD DW UKRQFXV LQ KHQGUHULW VHG DUFX

> @ 0iV ,QIRUPDFLyQ

7ZLWWHU #HVYDOBFKLOH (VYDO VH SRQH FRQ OD URMD SDUD VXV FOLHQWHV KWWS ELW O\ E 6/[' *UDFLDV #SUDPLUH]W +XER XQD URWXUD GH PDWUL] HQ HO VHFWRU \ QXHVWURV HTXLSRV WUDEDMDQ HQ WHUUHQR SDUD UHSRQHU VHUYLFLR D OD EUHYHGDG

2ILFLQD 9LUWXDO

(GXFDFLyQ

,QWHJHU VLW DPHW IHOLV 3UDHVHQW YLWDH GRORU VLW DPHW OHFWXV LQWHUGXP ODRUHHW 1XOODP WULVWLTXH DOLTXHW MXVWR 3KDVHOOXV PDXULV PL YHKLFXOD DW UKRQFXV LQ KHQGUHULW VHG DUFX

)RQR 6HUYLFLR KRUDV DO GtD GtDV D OD VHPDQD

)RQR &RPHUFLDO /XQ 9LH _ 6DE

*UDFLDV #DPLJRVB (IHFWLYDPHQWH GHWHFWDPRV XQD URWXUD GH PDWUL] HQ HO VHFWRU 6DQ ,VLGUR \ HVWDPRV WUDEDMDQGR HQ VX UHSDUDFLyQ 0DPiV GH 3XWDHQGR YLVLWDQ OD EDKtD GH 9DOSDUDtVR MXQWR D /DV JRWLWDV GH (VYDO KWWS ELW O\ EG7= '

7RGRV ORV GHUHFKRV UHVHUYDGRV &RFKUDQH 1 9DOSDUDtVR 7HOpIRQR )D[

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

CORTES

SUCURSALES

PREGUNTAS FRECUENTES

Buscar

BÚSQUEDA

ACCESO CLIENTE

Rut Contraseña Oficina Virtual

Comunidad

Educación

3 Noticias DÍA MUNDIAL DEL CONSUMIDOR

Ayuda

La Empresa

¿Olvido su clave? | Registrarme

Ingresar

Solicitamos $ 'HğQLU ODV IRWRV \ WH[WRV SDUD HO FDUUXVHO % 'HğQLU ORV WH[WRV ,QWURGXFWRULRV D FDGD VHFFLö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

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.

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.

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öQ GHO DOWR GH FDEHFHUD 5HGXFFLöQ GH WDPDòR GHO /RJLQ 6H YLVXDOL]DQ VROR QRWLFLDV 6H DJUHJD XQD FROXPQD UHODFLRQDGD FRQ ODV FHUWLğFDFLRQHV ,62 GH OD HPSUHVD

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

V bit.ly/bdTZ4D

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