Download - 04 - AI-2010
![Page 1: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/1.jpg)
taller multimedia - 04 arquitectura de la información
![Page 2: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/2.jpg)
La tecnología es fundamental,
pero insuficiente.
![Page 3: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/3.jpg)
Una buena experiencia de usuario se produce cuando una persona puede comprender un sistema
![Page 4: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/4.jpg)
Cuando un sistema no es usable, el usuario se confunde, se frustra y se culpa a sí mismo.
![Page 5: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/5.jpg)
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.
![Page 6: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/6.jpg)
![Page 7: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/7.jpg)
![Page 8: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/8.jpg)
![Page 9: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/9.jpg)
![Page 10: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/10.jpg)
![Page 11: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/11.jpg)
![Page 12: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/12.jpg)
![Page 13: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/13.jpg)
![Page 14: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/14.jpg)
![Page 15: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/15.jpg)
![Page 16: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/16.jpg)
![Page 17: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/17.jpg)
![Page 18: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/18.jpg)
![Page 19: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/19.jpg)
![Page 20: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/20.jpg)
![Page 21: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/21.jpg)
![Page 22: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/22.jpg)
arquitectura de la información
Crear y estructurar patrones básicos o inherentes de datos digitales y virtuales en el espacio de la WWW
![Page 23: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/23.jpg)
Clarificar la misión y visión del sitio, equilibrando las necesidades de la organización y las del público.
![Page 24: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/24.jpg)
Determina que contenido y funcionalidad tendrá el sitio o aplicación.
![Page 25: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/25.jpg)
Define los sistemas de organización, jerarquía, navegación, rotulado, búsqueda y recuperación de información
![Page 26: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/26.jpg)
organización seccionesjerarquía títulos, textosnavegación menúesrotulado descriptoresbúsqueda buscadores, tags
![Page 27: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/27.jpg)
secciones
títulos, textosmenúes
descriptores
![Page 28: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/28.jpg)
recuperación de información
![Page 29: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/29.jpg)
Proyecta el modo en que el sitio se adaptará al cambio y al crecimiento a través del tiempo.
![Page 30: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/30.jpg)
"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)
![Page 31: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/31.jpg)
la experiencia del usuario
![Page 32: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/32.jpg)
esqueleto
estructura
alcance
estrategia
concreto
abstracto
![Page 33: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/33.jpg)
The Elements of User ExperienceA basic duality: The Web was originally conceived as a hypertextual information space;but the development of increasingly sophisticated front- and back-end technologies hasfostered 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 beyondthe scope of its original application. The goal of this document is to define some of theseterms within their appropriate contexts, and to clarify the underlying relationships amongthese various elements.
Jesse James [email protected]
Visual Design: graphic treatment of interfaceelements (the "look" in "look-and-feel")
Information Architecture: structural designof the information space to facilitateintuitive access to content
Interaction Design: development ofapplication flows to facilitate user tasks,defining how the user interacts withsite functionality
Navigation Design: design of interfaceelements to facilitate the user's movementthrough the information architectureInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding
Functional Specifications: "feature set":detailed descriptions of functionality the sitemust include in order to meet user needs
User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site
Content Requirements: definition ofcontent elements required in the sitein order to meet user needs
Interface Design: as in traditional HCI:design of interface elements to facilitateuser interaction with functionalityInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design: visual treatment of text,graphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site
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 auser experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today.
task-oriented information-oriented
30 March 2000
© 2000 Jesse James Garrett http://www.jjg.net/ia/
![Page 34: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/34.jpg)
diseño visual
diseño de informacion
diseño de interaccción
funcionalidades
necesidades de usuario
![Page 35: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/35.jpg)
herramientas
![Page 36: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/36.jpg)
1. Técnicas de interacción con el usuario: Reunión, entrevista y encuesta, diseño de escenarios y diseño participativo.
![Page 37: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/37.jpg)
2.Técnicas de interacción con el contexto: Evaluación de productos similares y Análisis de la Competencia (benchmarking).
![Page 38: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/38.jpg)
3.Técnicas matemáticas (co-ocurrencia): Organización de tarjetas (card sorting) y Análisis de Secuencia.
![Page 39: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/39.jpg)
[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
![Page 40: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/40.jpg)
[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
![Page 41: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/41.jpg)
4. Técnicas de representación de información
4.1 Blueprints
4.2 Wireframes
4.3 Mockups
![Page 42: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/42.jpg)
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.
![Page 43: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/43.jpg)
http://www.jjg.net/ia/visvocab/spanish.html
![Page 44: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/44.jpg)
![Page 45: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/45.jpg)
homepage Portal
Menu
General
Acerca de historia Proyectos Organigrama Contacto
Usuarios
Alumnos DocentesAdministrativ
osEmpresas
Login
Homepage Carreras
Malla
CurricularExtensión
Carrera en
cada sede
Showcase-
GaleríaNoticias Proyectos
Galería0 2Items Homepage
Cuerpo
DocenteProyectos Eventos Galería
Admisión
Carrerras3 5
Noticias
Noticias4 Weblog
BLOG
Eventos6 7
Portal Web Escuela de Diseño - Arquitectura de la Información - Blueprint General
![Page 46: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/46.jpg)
homepage Portal
Menu
General
Acerca de historia Proyectos Organigrama Contacto
Usuarios
Alumnos DocentesAdministrativ
osEmpresas
Login
Homepage Carreras
Malla
CurricularExtensión
Carrera en
cada sede
Showcase-
GaleríaNoticias Proyectos
Galería0 2Items Homepage
Cuerpo
DocenteProyectos Eventos Galería
Admisión
Carrerras3 5
Noticias
Noticias4 Weblog
BLOG
Eventos6 7
Portal Web Escuela de Diseño - Arquitectura de la Información - Blueprint General
![Page 47: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/47.jpg)
1
0
2
3
4
![Page 48: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/48.jpg)
1
0
2
3
4
![Page 49: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/49.jpg)
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.
![Page 50: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/50.jpg)
WireFramesArquitectura de la Información
Desarrollo Portal Web Escuela de Diseño DuocUC
2.0Jorge Barrera
![Page 51: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/51.jpg)
Acerca de Historia Proyectos Escuela Organigrama
Logo Escuela
Homepage Portal
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.
Texto descriptivo escuela
Diseño
Ambientes
Diseño Gráfico Diseño
Industrial
Diseño de
Vestuario
Ilustración
Digital
Técnico en
Diseño Gráfico
Noticias GaleríaThis 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.
This is where the section help text would go. It should be brief but informative and
Weblog Eventos
Art Center at Night Open HouseAug 13, 20087:00--9:00 p.m.
Summer 2008 Graduation EventsAug 14, 2008 - Aug 16, 2008 Toyota Lecture Series: Jeffrey VeenSep 25, 20087:30 p.m.
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 AdministrativosDocentes Admisión
Contacto Mapa del sitio
Menu de carreras: Este podría llevar directamente al home de carreras o tener un menu propio
La noticias se estractaran de las noticias por carrera.La galería de igual modo hace un llamado de el showcase de cada carrera
Weblog de la escuela, se dirige a una sitio propioEnventos es un calendario que también se maneja por cada carrera y centralmente
Tipos de usuarios que llevan a una página dedicada
0
1
2
3
4 5
6 7
Pielinks Institucionales legal escuela
8
Empresa
Gonzalo Fuentes realizó observación sobre orden de las carreras - Se cambia a alfabético - Manteniendo las carreas técnicas separadas
Se agrega a petición del equipo el texto proyectos escuela
![Page 52: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/52.jpg)
1
0
3 2
4
![Page 53: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/53.jpg)
El Mockup es un prototipo visual que incluye una propuesta de diseño que integra la mayoría de las variables.
![Page 54: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/54.jpg)
Correcciones
Solicitamos
Noticias
19 de Enero del 2010
19 de Enero del 2010
Fono Servicio 600 600 60 60
Lun / Vie 8:30-18:00 | Sab 8:30-14:00 Fono Comercial 600 555 20 20
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.
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.
Oficina Virtual
DÍA MUNDIAL DEL CONSUMIDOR
MESAS BARRIALES
EducaciónInteger 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.
Certificación ISO
[+] Más Información
[+] Más Información
24 horas al día / 7 días a la semana2010. Todos los derechos reservadosCochrane Nº 751, Valparaíso. Teléfono (32) 2209 000. Fax: (32) 2209 502
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.
Gracias @amigos_1979. Efectivamente detectamos una rotura de matriz en el sector San Isidro y estamos trabajando en su
V http://bit.ly/bdTZ4D
1 2 3 4 5
El agua es un recurso natural esencial para el desarrollo de diferentes formas de vida que existen en el planeta tierra.
Si quieres obtener mayor informa-ción sobre el agua visita la sección educación.
El agua
BuscarCORTES SUCURSALES PREGUNTAS FRECUENTES BÚSQUEDA
Oficina Virtual Comunidad Educación Ayuda La Empresa
ACCESO CLIENTE
Ingresar¿Olvido su clave? | Registrarme
Rut
Contraseña
1
2
3 a
B
4
![Page 55: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/55.jpg)
! 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
![Page 56: 04 - AI-2010](https://reader031.vdocumento.com/reader031/viewer/2022013106/568bd9701a28ab2034a70eab/html5/thumbnails/56.jpg)
! 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