Embed Size (px)
DESCRIPTION
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.
Citation preview
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 seccionesjerarquía títulos, textosnavegación menúesrotulado descriptoresbúsqueda buscadores, tags
secciones
títulos, textosmenúes
descriptores
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
estructura
alcance
estrategia
concreto
abstracto
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/
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
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
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
1
0
2
3
4
1
0
2
3
4
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.
WireFramesArquitectura de la Información
Desarrollo Portal Web Escuela de Diseño DuocUC
2.0Jorge Barrera
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
1
0
3 2
4
El Mockup es un prototipo visual que incluye una propuesta de diseño que integra la mayoría de las variables.
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
! 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
Propuesta Institucional
