Dise単o interactivo
dise単 intera
o activo bitĂĄcora diseĂąo de la informaciĂłn intersemestral
Universidad Anahuac del Norte Especialidad en Diseño de la Información Intersemestral 1 Junio-JULIO / 2012
Materia: Diseño interactivo Mtra. Ana María López Balbin Diseño y redacción: Denisse Grisel Piña Hernández
Ciudad de México, julio de 2012.
Diseño interactivo La presente bitácora reúne toda la serie de ejercicios, comentarios y conclusiones del curso de verano de Diseño interactivo, impartido por la Mtra. Ana María López Balbín, que realizamos en el mes de junio de 2012, para la Especialidad en Diseño de la Información. El trabajo se baso en el desarrollo de una bitácora de una clase específica, para trasladarla de su naturaleza impresa al mundo interactivo. El preámbulo del curso se baso en la experiencia de usuario, considerando además los principios de usabilidad, arquitectura de la información y diseño centrado en el usuario, para guiarnos en la tarea de diseñar un producto interactivo con características específicas. La traducción se baso en incorporar la dualidad de forma y contenido en una interface que
reuniera el concepto reactor de cada materia. Acotando, la forma a través de la cual se transmite un contenido, es una interface de lectura, así se constata que el diseño da forma a lo escrito, es decir a su contenido, hablaríamos entonces de un diseño de la información, la interface entre lo escrito y el lector. Identificando estas posibilidades incorporamos además la navegación, es decir la forma en que decidimos cómo nuestro usuario va a poder accesar a la información. Lo más importante fue crear intertextualidad. Esta posibilidad de hipertextualidad deja entrever al usuario las redes de información que pueden desarrollarse en el diseño interactivo, haciéndolo trascendente en el diseño de a información y por ende en la comunicación.
El diseño debe seducir, educar y, quizás lo más importante, provocar una respuesta emocional.
07
April Greiman
Bitácora 1 / 18 de junio 2012
El Diseño interactivo definición interaction design is not about computing technology
08
Desde mi punto personal el diseño interactivo son todas aquellas acciones materializadas en una interfaz para generan una experiencia positiva al usuario. La interactividad se rige de los principios de simplicidad para conceptualizar los estados de navegación. El diseño interactivo es de naturaleza intertextual, es decir no es lineal, es una red de información que permite libremente al usuario navegar como el se interese. El diseño interactivo propone la acción del usuario por medio de las decisiones visuales que se propongan en la interface. El diseño interactivo diseña la experiencia del usuario quien navega esa interfaz, por lo que la interactividad se vuelve un dialogo entre quien diseña y usa, por lo que debe ser lo suficientemente claro para inducir a una respuesta. Según Gillian Crampton, se trata de dar forma a nuestra vida cotidiana a través de artefactos digitales, para el trabajo, para el juego, y para el entretenimiento Según Janet Murray, un diseñador interactivo conceptualiza una aplicación. El diseñador determina la manera como aparece la información que buscamos en la red y los procesos a través de los
Diseño interactivo / especialidad en diseño de la información
09
cuales la alcanzamos, determina cómo se comporta una aplicación y cómo se comporta el usuario al utilizar dicha aplicación. El diseño interactivo es una arquitectura de información diseñada en especifico para que un usuario pueda interactuar con la información para obtener algo. Según la RAE, el diseño es un proceso. El diseñador es un pensador, cuyo trabajo es moverse del pensamiento a la acción. Define la interacción como la acción que se ejerce recíprocamente entre dos o más objetos, agentes, fuerzas, funciones, etc. Según Bou Bauzá Guillem “La interactividad supone un esfuerzo de diseño para planificar una navegación entre pantallas en las que el usuario sienta que realmente controla y maneja una aplicación” . En este sentido el usuario debe navegar por la aplicación y sentirse libre.
CONCEPTOS DE USABILIDAD
ANÁLISIS DE PROCESOS COGNITIVOS DE RESPUESTA
INFORMACIÓN
ANÁLISIS DEL USUARIO
DISEÑO INTER
ACCIÓN REACC
USUARIO
PARTICIPACIÓN NECESIDADES PERFIL CAPACIDAD DE APRENDIZAJE PERCEPCIÓN
ESPACIO/TIEMPO REPETIBLE · REPRODUCC
EXPERIENCI CONFIANZA
DIÁLOGO
NAVEGACIÓN
MULTIMEDIA HIPERTEXTO
CÓDIGOS
NO LINEALIDAD CONCEPTO/FUNCIÓN
DISEÑO DE LA INFORMACIÓN ARQUITECTURA
JERARQUÍA (HERRAMIENTAS) TEXTO GRÁFICOS IMÁGENES VIDEO AUDIO ANIMACIÓN
ESTRUCTURA
RACTIVO
CIÓN
INTERFAZ DISPOSITIVO PROGRAMA MEDIOS DE PUBLICACIÓN
CIONES
IA RETROALIMENTACIÓN LIBERTAD
Análisis del sitio web: Monocle http://monocle.com/
Análisis del home page 1.- Cuenta con un encabezado 2.- 5 secciones en la parte superior (Affairs, Business, Culture, Design, edits), mas 4 pestañas permanentes que complementan estas secciones (Radio, Programmes, Magazine, Shop & Service. 3.- Foto principal con encabezado de 9 noticias distintas Botón de búsqueda y suscripción 4.- 7 subtemas en la parte inferior 5.- Menu inferior.
Cómo esta estructurado Esta bien delimitado con las partes básicas de una página web. Esta bien organizado y estructurado. Encabezado, cuerpo, menú inferior, botones
Contenido y jerarquía Tiene buen contenido, es amplio y extenso, la parte superior está bien resuelta, pero la parte inferior es mucho, aunque si está estructurado.
La interfaz es funcional S estás familiarizado con la revista impresa es más fácil. Pero en general funciona.
Recursos que utiliza Utiliza texto, links, imágenes, audio y video.
Es fácil acceder a la info (navegación) Si, si tienes el previo de la revista impresa es mucho más fácil, aunque sin ella también se puede, pues sigue el principio de no linealidad.
función- estética Me gusta el diseño, los detalles que sorprenden como pequeños botones que aparte de ser estéticos tienen un hecho funcional. Esta ordenada.
Características peculiares del sitio - La radio es lo mejor. - La información que maneja es muy buena. -El estilo fotográfico. -Es simple.
Que propones para mejorar el sitio Quizás un poco menos de información en la parte inferior para no saturar.
Observaciones -Conserva el diseño y concepto de la revista impresa, pero sigue su propia autonomia. El sitio genera sorpresa. -Creo que es una extensión de la revista impresa, pero por el hecho de que amplia la experiencia, encuentras no lo mismos artículos sino más sobre ellos, te da más alternativas, más opciones. -Es mutisensorial.
013
A quién va dirigido A lectores de la revista que desean ampliar su experiencia
Bitácora 1 / 18 de junio 2012
el concepto de interfaCe Según los apuntes de Lila Pagola, la invención de las interfaces de usuarios basadas en gráficos es muy reciente relativamente, esto significó la posibilidad de acceso a gente común a la manipulación de tecnología. La motivación que les da origen supone pensar acerca de la función de una interface de usuario: • Si una interface de usuario de un sistema consiste de aquellos aspectos del sistema con los que el usuario entra en contacto, físicamente, perceptivamente o conceptualmente. • O desde la acción concreta, cuando los seres humanos y los ordenadores interactúan lo hacen a través de un medio o interfaz. Una interfaz es una superficie de contacto [Laurel, 1990] que refleja las propiedades físicas de los que interactúan, las funciones a realizar y el balance de poder y control. Así, una interface debe tener dos características principales
• •
Visibilidad: se refiere a lo la definición de Laurel menciona al decir que “reflejan las propiedades físicas de los que interactúan”, o sea que las interfaces en su forma aluden a las características físicas (lo visible o audible, la fuerza o la rapidez si es un humano, la cantidad y forma de los conectores, si pensamos en una interface hardware) Comprensión intuitiva, o propiedad de ser evidente la parte del objeto sobre la que hemos de realizar la acción y cómo hacerlo. Se refiere al hecho de que además de poder interactuar con la interface (porque la veo, la oigo primero que nada) tengo que poder entender como y que hacer con ella, tiene que estar a la altura de sus capacidades intelectuales.
014
•
Diseño interactivo / especialidad en diseño de la información
Características de productos interactivos La interactividad o la interacción, etimológicamente se refiere a la acción que ejercen dos agentes entre sí. Interactividad es sinónimo de diálogo, de retroalimentación y de cooperación.
•
•
•
• •
• •
•
Potencialidad en cuanto a lo que el usuario espera del objeto o sistema Se centran en usuarios que permiten completar un tarea o alcanzar u objetivo Son de naturaleza contextual resuelven problemas específicos bajo circunstancia particulares Acción- reacción. Se establece una relación entre lo que hacemos y como responde el sistema Transforma al espectador pasivo en receptor activo. Permite ejercer control sobre el contenido y el flujo de la información Cuentan con una interfaz Información estructurada en varios niveles (arquitectura de la info) Interactividad en varios niveles
015
•
Bitácora 1 / 18 de junio 2012
• • • • • • • • • • •
Narrativa no lineal. Intuitivos: funcionamiento basado en experiencias. Se establece en mayor o menor grado un patrón. Puede ser accesados al azar o sistemáticamente. Facilidad de aprendizaje. Escalables. Multisensoriales. Enriquecen la experiencia del usuario. Facilitan la compresión de la información. Integración: combinación de formas artísticas y tecnológicas en una forma hibrida de expresión. Inmersión la experiencia de entrar en la simulación de su contexto tridimensional.
El diseño interactivo es la habilidad utilizada para la creación de una interfaz a través de la cual la tecnología de la info puede ser manipulada •
•
Se centra en usuarios que intentan completar una tarea, alcanzar un objetivo utilizando una herramienta en un contexto determinado. Comunicación bidireccional.
Autor
Usuario
016
información
Diseño interactivo / especialidad en diseño de la información
fotografía
video
audio
multimedia
infografía
interacción textos
•
• •
•
Presentación en una estructura espacial y temporal. Recepción grupal / acción individual. Los productos interactivas se caracterizan por estar dirigidas a grandes grupos de usuarios. Cada usuario genera su propia experiencia. Individualización del acto de percepción. El autor tiene que diseñar la experiencia de recepción del interactor dándole una serie de opciones que configuran experiencias distintas en cada elección particular, lo que diseña en ultima instancia es una experiencia, unas reglas del juego. El modelo de la interactividad es el del dialogo.
017
•
Bitácora 2 / 19 de junio 2012
Análisis de sitios web
018
A continuación presento el anáisis de cinco sitios relevantes para desarrollar mi sitio y que son desde mi punto de vista con una navegación interesante. Trate de escoger sitios que evocaran el principio de la simplicidad y del diseño de la información.
Sitio: The Noun Project
URL: http://thenounproject.com/
Descripción del Home Page El home page consiste en una galería de iconos que destaca sobre todo el diseño. Tiene un pequeño menú superior e inferior donde vienen las categorías, para poder comprar, etc. y un gran botón para poder buscar.
¿A quién se dirige el sitio? A diseñadores, ilustradores, comunicólogos.
¿Cómo se encuentra estructura el sitio? Es un sitio visual, el icono rige el diseño, cada icono es un botón que despliega la info de ese icono y de sus relaciones, es decir su navegación es una red de interconexiones, cada icono se puede descargar. En el botón buscar introduces palabras claves y te asocia con el mismo icono, no despliega la palabra sino el pictograma.
Descripción del contenido y jerarquía de la Información Es un sitio genialmente estructurado sobre todo por su simpleza y su contenido, como son pictogramas, el objeto de búsqueda se vuelve visual y la jerarquía es clara.
Descripción de la Interfaz y Navegación
019
Es muy fácil de acceder y manipular. Para descargar la imagen y buscar también es muy sencillo.
Diseño interactivo / especialidad en diseño de la información
Recursos que utiliza (texto, imagen, animación, video, etc) Es totalmente pictográfica, solo usa muy poco texto y un 85% es imagen.
Diseño de la Información (Relación Función/Estética) Es funcional y estético por la conceptualización de la búsqueda de pictogramas, su fin es ser galería y a la vez biblioteca pública.
¿Qué te gusta? ¿Qué te desagrada? (funcional /estético) Me gusta el diseño. La facilidad de la búsqueda. Las relaciones que se pueden hacer entre pictogramas La facilidad para subir y bajar pictogramas El fin altruista del sitio. La simplicidad en todo el sistema Lo único que me desagrada es que a veces tarda un poquito en descargarse todo, pero aciertan en que se descargue poco a poco y se van desplegando por conjuntos pequeños y no todos juntos.
Características peculiares del Sitio La forma en que despliega la información, es simple, se oculta y se despliega según se necesite, esta bien organizada. Sigue los principios de la simplicidad de Maeda. Es útil y relevante a su target.
¿Qué propones para mejorar el sitio? Nada, me gusta como está. Esta bien pensado.
Observaciones
021
Ofrece varios tipos de navegación para mostrar las galerías, los niveles que maneja lo hacen un sitio útil y usable. Las relaciones que hace son relevantes igualmente, es como si en un paso hicieras tres al apretar un solo botón, esta información adicional aporta y lo llena de significación. Además cada icono esta contextualizado y lo que más me gusta es que muestra claramente los créditos de cada imagen. El trabajo de etiquetas es relevante y valioso.
Sitio: Pinterest
URL: http://pinterest.com/
Descripción del Home Page Es una galería de colecciones de imágenes, siendo esto lo que rige todo el home, solo tiene un sencillo y discreto menú superior. Cada imagen seleccionada puede contener comentarios de otros usuarios. Si eres usuario de lado izquierdo aparece un menú con actualizaciones de tus contactos.
¿A quién se dirige el sitio? Es una red social que consiste en guardar tus imágenes relevantes organizadamente en colecciones particulares. Pinterest se usa para encontrar, compartir, filtrar y organizar principalmente imágenes, pero también vídeo. Permite la curación digital de contenidos con tableros personales temáticos con los que organizar y compartir contenidos multimedia.
¿Cómo se encuentra estructurado el sitio? Como es una galería de imágenes cada una de ellasfunciona como link o botón que te lleva a otro contenido o usuario o colección. La estructura es en red infinita. El menu superior te da datos para ubicarte y regresar a tu cuenta o al home.
Descripción del contenido y jerarquía de la Información La jerarquía visual se centra en las imágenes que funcionan como lo más llamativo de la página. Cada imagen corresponde a una colección, por lo que el contenido se organiza según la visión particular de cada usuario. Los botones y la navegación hace muy sencillo de distinguir que va primero y que va después, tiene un buen manejo de información visual y de diseño de información.
Bitácora 2 / 19 de junio 2012
Descripción de la Interfaz y Navegación ¿La interfaz es funcional? ¿Se accede fácilmente a la información? Si es fácil y obvia.
Recursos que utiliza (texto, imagen, animación, video, etc) Recurre principalmente a imágenes, pero también cuenta con animaciones, videos y el texto es el indispensable para navegar a través de las imágenes.
Diseño de la Información (Relación Función/Estética) La relación es proporcional y relevante para su target.
¿Qué te gusta? ¿Qué te desagrada? (funcional /estético) Me gusta el concepto, ya que parte del concepto de la organización por medio de colecciones de forma fácil y sin complicaciones. Es adictivo su uso Me desagrada que a veces tarda en cargar.
Características peculiares del Sitio La forma en que se puede organizar la información y como se combina con la simplicidad en su navegación. Puedes descargar un botón a marcadores para cuando navegues por las páginas puedas guardar las imágenes, video, etc.
¿Qué propones para mejorar el sitio? A veces es lento par abrirse y navegar, quizás optimizar esta parte. Pero en general me agrada.
Observaciones
024
Es una buena opción para aprender a organizar. La navegación es sencilla y fácil. El botón de guardar, te hacen estar presente en todo momento en que el usuario usa internet. Es una de las redes sociales con más potencial.
Diseño interactivo / especialidad en diseño de la información
Sitio:
Learn Something Every Day URL: http://cargocollective.com/learn somethingeveryday
Descripción del Home Page Es una galería de imágenes con datos curiosos, esto es lo más importante del home, aunque hay uno que es más grande que los demás que jerarquiza, con un pequeño menú superior.
¿A quién se dirige el sitio? A gente curiosa, es un sitio que es como un diario, por cada día hay un dato importante. Creo que más se dirige a diseñadores y comunicólogos, pero es un sitio de ocio.
¿Cómo se encuentra estructura el sitio? Por una serie de tarjetas que son desplegables en el punto en que se encuentran se hacen más grandes. Solo se despliega y cierra, estas no te llevan a ningún otro sitio, solo su visualización cambia.
Descripción del contenido y jerarquía de la Información
025
La jerarquía es visual por color y tamaño, todos los cuadros son del mismo tamaño, pero cuando te acercas a leer uno, este se hace más grande, destacando más que los otros. La jerarquía la decide el que navega la página al seleccionar que quiere destacar. El contenido es una especie de sabías qué, son datos curiosos y entretenidos.
Diseño interactivo / especialidad en diseño de la información
Descripción de la Interfaz y Navegación La interfaz es funcional, creo que quisieron hacer una especie de juego o tarjetero, el acceso y navegación es bastante sencilla y fácil de entender y de acceder a ella, es simple y sin pretensión, creo que para el concepto funciona muy bien.
Recursos que utiliza (texto, imagen, animación, video, etc) Utiliza texto e ilustración, aunque el texto se funde para parecer más ilustración. Pero es funcional a su concepto.
Diseño de la Información (Relación Función/Estética) Al ser un sitio de ocio, esta bien logrado, es como la colección de caricaturas del periódico, pero bien presentadas. El diseño marca un estilo bien definido, su estética es proporcional a su función, relevante al target.
¿Qué te gusta? ¿Qué te desagrada? (funcional /estético) Me gusta la sencillez de la navegación, a pesar de ser bastante sencilla, creo que es fácil de entender y de navegar, además mezclado con el diseño, lo hacen apreciable a la vista. Me desagrada que el botón de siguiente y anterior son muy pequeños y puedes no verlos.
Características peculiares del Sitio El estilo de la lustración es muy buena. La gama de color que utiliza. El código gráfico que maneja. La simpleza de la navegación.
¿Qué propones para mejorar el sitio? Hacer otros iconos para el botón de siguiente y de atrás.
Observaciones
027
El sitio esta a punto de migrar, lo están dejando por un tiempo, pero ya anuncian que lo quitaran. El contenido es muy bueno, demasiado. Como es un diario son muchísimos datos curiosos interesantes.
028
Sitio: La Photocabine URL: http://www.laphotocabine.com/ Descripción del Home Page Es una metáfora de un photomaton, es un sitio muy sencillo un simulador que te invita a pasar a tomarte la foto, se enciende tu cámara y aparece un pequeño menú en la parte inferior para manejarlo.
¿A quién se dirige el sitio? Fotografos, fans del photomaton.
¿Cómo se encuentra estructura el sitio? Para acceder solo hay que presionar un botón, así que en este punto es jerarquico, después aparece otro nivel parecido, otro botón para disparar, después hay otro nivel donde aparecen dos menús, uno para manipular la foto, con algunas opciones para el color o formato de la foto. Y en la parte inferior un menú para guardar, imprimir, enviar o subir a redes sociales la foto. Una vez que te tomas la foto y decides que hacer con ella, te regresa automáticamente al home.
Descripción del contenido y jerarquía de la Información Es un sitio de entretenimiento. La jerarquía de información está dada por tu propia cámara y el botón que simula el disparador, creo que ahí radica todo.
Descripción de la Interfaz y Navegación La interfaz es muy sencilla y funcional para lo que es, es fácil acceder a la info, porque es muy poca en realidad. La interfaz simula el tablero de manejo del photomaton, como dije antes es una metáfora bien usada. El botón más importante es el disparador. Después de que te tomas las foto las dos ventanas son muy simples y muy fáciles de manejar y entender, pues los botones utilizan iconos estándar y bien conocidos por todos.
029
Del lado derecho aparecen unos banners que son publicidad y enlaces a redes sociales.
Bitácora 2 / 19 de junio 2012
Recursos que utiliza (texto, imagen, animación, video, etc) Utiliza la cámara de tu computadora, imágenes, texto y video.
Diseño de la Información (Relación Función/Estética) Esta más cargado de la parte estética, pero funciona bien. La metáfora esta muy bien diseñada y construida.
¿Qué te gusta? ¿Qué te desagrada? (funcional /estético) Me gusta por la metáfora, la nostalgia, el diseño, porque es diferente. Me desagrada que solo salen dos tipos de fotos.
Características peculiares del Sitio El uso de tu propia cámara. La navegación es simple. La programación que tiene.
¿Qué propones para mejorar el sitio? Más opciones para editar las fotos como el color, formato, etc.
Observaciones
030
Si lo usas frecuentemente te guarda un historial con las fotos que te has tomado, aunque no las guardes, esto te permite rescatar alguna que por alguna razón no la guardaste, esto sin la necesidad de registrarte. Tiene tres opciones de idioma y puedes activar o desactivar el sonido.
Sitio: La Photocabine
URL: http://www.timflach.com/
Descripción del Home Page Es un home muy sencillo, con el nombre del fotógrafo, y seis links que abren su portafolio, de fondo es un video de un perro camindo, pareciera que el portafolio esta debajo de el, y el camina encima de un cristal.
¿A quién se dirige el sitio? A personas que buscan un fotógrafo, es un portafolio de un fotógrafo profesional, enfocado a animales.
¿Cómo se encuentra estructura el sitio?
031
Tiene seis pestañas con diferentes niveles cada uno: Portfolio: tiene tres categorías: More tan human, Dogs God, Equss. Cada una es una galería de fotos con una navegación especial para cada una. A base de mosaico, que desaparece y aparece con mouse over. Books: aparecen los links de los libros en los que ha participado. News: aparecen los lugares o revistas donde han salido sus fotos, la navegación es por año, desde el 2010 al 2012 y por meses de cada año. Exhibitions: tiene una lista de exhibiciones, dividida en tres páginas, con botones de siguiente. Info: tiene 4 niveles más que despliegan su cv y biografía Contact: solo aparece una pantalla con sus datos
032
Diseño interactivo / especialidad en diseño de la información
Descripción del contenido y jerarquía de la Información El contenido es una galería fotográfica, donde se muestra el trabajo del fotógrafo, la información esta bien jerarquizada, pues el menú es muy breve.
Descripción de la Interfaz y Navegación ¿La interfaz es funcional? ¿Se accede fácilmente a la información? La interfaz es principalmente una galería de imágenes, por lo que la navegación y la mayor parte del diseño se centra en desplegar bien esas fotos y visualizarlas bien. Lo más importante es una foto principal, debajo aparecen las demás en cuadros pequeño que aparecen y desaparecen, tiene además una navegación lateral que se desliza.
Recursos que utiliza (texto, imagen, animación, video, etc) Utiliza texto, imagen y video.
Diseño de la Información (Relación Función/Estética) Es muy estético, se centra mucho en su fotografía principal, lo cual es obvio al ser un portafolio de trabajo, los demás elementos están subordinados de una manera inteligente. Se ve contemporáneo y elegante, simple y sobrio.
¿Qué te gusta? ¿Qué te desagrada? (funcional /estético) Me gusta el juego de espejo que se hace con el video del perro en el home, pues desde el home muestra el tipo de fotógrafo que es y su estilo esta bien empapado en todo el sitio. En general es funcional, pero a veces la navegación lateral es complicada de manejar.
Características peculiares del Sitio El video del home es el plus. La navegación de las galerías de imágenes, que aparecen con mouse over y el deslizamiento para navegar.
¿Qué propones para mejorar el sitio? Trabajar en la navegación lateral, esta padre, pero como a veces pierdes el control y de repente te pierdes en que imagen ibas.
Observaciones Es un sitio hecho en flash. El botón de regresar del navegador, no te regresa a la página anterior de la misma página sino al sitio anterior que navegaste, es decir te saca del sitio.
Bitácora 3 / 25 de junio 2012
sitio web Diseño orientado al usuario
034
La World Wide Web de información es una red de recursos de alcance mundial. Al ser un contenedor de enlaces, un sistema inmenso de información, su análisis y su cuidado es preponderante a su uso y utilidad, es por eso que el diseño de información tiene la tarea enorme de transformar de codificar estos sitios en herramientas funcionales de comunicación. El alcance del diseño de información en el desarrollo de sitios web no solo es evocar su usabilidad, sino generar una experiencia positiva, transcendente, útil y satisfactoria a un usuario gracias a una interfaz y navegación eficaces. Un sitio web constituye todo un sistema de publicación y distribución de la información conformado por una colección de pagos que pueden ser visualizados por medio de un navegador. El éxito de un sitio está en logar un equilibrio entre los aspectos funcional y estético para de esta forma satisfacer las necesidades del público al que va dirigido Como en cualquier tarea área de diseño, el diseño web debe estar orientado al usuario por lo que es indispensable investigar las necesidades del público potencial.
Diseño interactivo / especialidad en diseño de la información
Metodología A continuación presento la metodología dada en clase para la elaboración de sitios web funcionales relevantes al target que se dirigen.
035
1.- Análisis de la información (organización y descripción detallada del contenido 2.- Definición y planeación del sitio (arquitectura de la información, navegación) 3.- Desarrollo de diagramas y prototipos 4.- Concepto y estrategia narrativa 5.- Diseño de la interfaz gráfica (especificación detallada) 6.- Especificaciones de los recursos técnicos necesarios 7.- Producción
American Center for Desi Third Annual Living Surfa design
is divided into specialities
all have
that may focus on: - messages the domain of graphic design - objects the domain of product design - environments the domain of architecture These specialties often overlap. Interface design (which focuses on making things easy to use) cuts across all three domains.
is
a process
involves
that proceeds in
scales of practice
cycles of iteration based on feedback
Design may be practiced with special concern for: - form how the result looks - meaning and organization what the result says, is, and does - context and use how the result fits into the world Ignoring any of these issues tends to diminish the result.
begin with research or testing (analysis)
result in that leads to that leads back to
Designers do not share a standard definition of the design process, though many would agree that it involves a cycle of research, prototyping, testing, and further prototyping or refining. The chart below expands this model and applies it to software interface design, especially on-line services.
This diagram is a concept map describing design. The long horizontal box defines the main concept. The ovals contain major concepts linked in hierarchies with broader concepts at the top. Linking phrases connect the concepts. For this diagram, I have borrowed from the work of Don Koberg and Jim Bagnall, John Chris Jones, and Peter Rowe. I would also like thank Rich Binnel and John Cain for their suggestions.
Design process model for on-line service development:
prototyping (synthesis) The process of prototyping may cycle through several stages: - needs definition - feasibility study - detailed design The chart below details the process through the end of the feasibility study.
organization
Assignment offered Discuss the assignment’s - context - nature - scope Agree on expectations about - budget - participants - process - schedule Accept assignment Form team, possibly including - anthropologists - copy editors - graphic designers - illustrators - photographers - producers - programmers - sound editors - video editors - writers
sign aces Conference that involves
people
acting as
attempting to solve
acting as
sponsors or clients
retain
designers
problems
acting as represent
end users End users might also be called: - readers - the audience - consumers - the public
that are of
unmet needs or goals that may be: - well defined - ill defined - virtually undefinable
These are the people who use the Internet. traditionally have created plans for mass manufacturing
are increasingly likely to create are simpler than
which result in identical copies
study
Research - similar projects - relevant literature Observe - activities/tasks - environments - interactions - objects/tools - users Document - research - observations Draw conclusions
See the Internet chart below.
systems Systems do not have a fixed final form. Rather the final form is partially determined by...
transformation
modeling and testing
Brainstorm - profile users readers authors advertisers -generate ideas for functions for content for organization - create use scenarios
Create prototypes - card models - Post-it note charts - paper sketches - on-screen animations - working code
Choose and prioritize - users - ideas - scenarios
Draw conclusions - what works - what doesn’t - what’s missing - what can be eliminated
Test prototypes with users Observe reactions
Define problem and needs
Prioritize changes
Write project proposal or creative brief
Iterate this phase - quickly - as often as possible...
evaluation
Define product requirements - user functions - content - technology Determine business case - potential income volume unit price subscriptions sponsorships advertising - likely costs staff software development hardware ongoing maintenance support - survey potential vendors Decide whether to proceed
execution
Detailed design... Production planning... Production... Ship or launch...
Design for t Eras in the history of computing beginning about
may foster
creates
social change
a new paradigm for computing
for example: - communities of interest will form - markets may become more nearly “perfect” - information may lose value - privacy may be threatened - intellectual property laws may be revised ... all of which may affect ...
use
people
1940
Research Era - limited to labs
1950
Centralized Era - first commercial uses - mainframes
1970
Distributed Era - focus turns to individual users - minis, workstations, and PCs - PDAs and game machines
1990
Network Era - computers connected - LANs, WANs, and the Internet - wireless connections
computers
connected to
the Internet
acting as: - authors and sellers - readers and consumers Traditional roles may blur as virtually anyone can publish. Summary of Internet use: - 38 million users today (includes users limited to e-mail) - growing 10% per month - 4.9 million servers connected to the Internet - 22,000 servers are Web-capable compared to 1,265 in June 1994 Summary of computer ownership: - 100 million computers in the US - may be 200 million by 1999 - 40 to 50% are in homes - 60% in homes have modems
receiving
running
to driving
software
creating
via: - cameras and scanners - keyboards and mice - microphones - MIDI instruments
including: - Mac OS - MS DOS - OS/2 - UNIX - Windows
a network of networks
output via: - CRTs - printers - networks - speakers
such as operating systems
is
returning
from input
such as supporting
applications (or tools)
that can create
including: - databases - word processors - spreadsheets - paint and draw programs - page-layout programs - authoring programs Applications used to connect with the Internet are often called...
There were 2,000 in 1989, and now are at least 30,000.
such as
providing
interactive multimedia
a range of services
including: - entertainment titles - games and simulations - reference works Today, interactive multimedia titles are primarily stand-alone applications distributed via CD. The Internet, and especially the World Wide Web, provide a new way to publish multimedia....
based on standards
for
for physical connections
This diagram is a concept map describing the Internet.
such as
Concept maps are educational tools described by Joseph Novak in Learning How to Learn which he co-authored with Bob Gowan.
I invite comments and criticism. - Hugh Dubberly, July 30, 1995
software protocols
for example: - the telephone system (often via modems running at 14.4 kbits/sec) - cable TV systems - fiber-optic cables
The vertical box defines the main concept. The horizontal box places it within a context. The ovals contain major concepts linked in hierarchies with broader concepts at the top. Linking phrases connect the concepts. Dashed lines connect concepts between hierarchies.
The diagram is my idiosyncratic view, and I am responsible for any errors or omissions. However, I would like to acknowledge Charles Altschul’s work on information structures and thank him, Erin Murphy, John Skidgel, and Eliot Bergson for their many suggestions.
supporting
clients (or browsers) In the context of computing, clients refer to computers that run software connecting them to networks. Client software allows users access to files stored on servers.
such as which access
servers
support
which supply
Standards supported by Web clients include: for pages -ASCII, HTML, PDF, RTF for images - GIF, JPEG, PICT, TIFF, XBIT for sound - AIFF, AU, WAV for digital video - AVI, MPEG, QuickTime for 3D modelling - QuickTime 3D, VRML for extensions - Java for compression - BIN, HQX, SIT, ZIP
Servers standards include: - Gopher - World Wide Web - CGI - security “firewalls”
Servers are computers that run software for connecting to networks and controlling large hard disks — for the purpose of storing and sharin files. This process is called “serving.
the Internet
ting
ng .�
some of which represents
some of which represents
funds or purchases
content
and enables commerce, for example: - financial transactions - ordering from catalogs
to create
ranging from: - trivial to scholarly - current to historic
to store and retrieve
to exchange
information
has
can be presented as
no center or central authority
a zero-directional structure
some are only access providers
some are are also
content aggregators
Many are local companies.
the first of which was asynchronous: forward and store
such as
Data transfer standards include: - FTP - HTTP - PPP - SLIP - TCP/IP - transaction security (encryption)
live conferences
a sequence
can be organized into can be part of
for example: - a speech - a novel - a movie If the audience controls the direction, (and entry point and pace) the structure is two-directional; if not, the structure is one-directional. including: -professional services such as Dialog, Lexis, and Nexis - consumer services such as America Online (AOL) CompuServe (from H&R Block) eWorld (from Apple) Microsoft Network (MSN) Prodigy (from Sears and IBM) - private bulletin board services - internal corporate networks
also including later came
These are documents stored for others to view at a later time. Most common is e-mail. It may be one to one or one to many. Bulletin boards are a variation: essentially mail posted to the public. Both may incorporate other files.
data transfer
can be organized into can be part of
for example: - a stop sign - an alarm Here the information is perceived all at once.
...though committees and marketshare determine...
in the form of: - text and numbers - images and sounds - digital video - descriptions of 3D objects ... which combine to form ...
a multi-directional including: structure - hierarchies - matrices - parallel sequences for example: - overlays - a map - webs - a newspaper The audience has some control and may follow many different paths. Navigating a multi-directional structure may be aided by a surrogate. When presented on a computer, multi-directional structures are often called... hypertext or hypermedia an example is...
A system like hypertext was first described by Vannevar Bush in “As We May Think,� Atlantic Monthly, July, 1945. Ted Nelson coined the term in 1974 in Computer Lib/Dream Machines.
most recently adding followed by
Most common are text chats. They may be one to one or many to many. They may incorporate: - collaborative spaces (or white boards) - audio - digital video
World Wide Web (or Web or WWW)
...developed at CERN in Switzerland, and augmented by release of NCSA Mosaic in April 1993 and Netscape Navigator in December 1994...
The Web provides an easy way for anyone with a connection to the Internet to view documents incorporating images and other data types. Web documents may also include links to other documents which may be located anywhere in the world. The Web is changing quickly, incorporating bulletin boards and live conferences and bringing hypertext and multimedia to the Internet....
Bitácora 3 / 25 de junio 2012
Arquitectura de la información Fue Wurman en 1975 cuando introdujo el concepto de arquitectura de información, el menciona que un arquitecto de la información hace claro lo complejo, hacen que la información sea comprensible para otros seres humanos.
040
La arquitectura de información parte del análisis de datos, para organizarla y estructurarla en espacios de información, esta selección y presentación de datos en información, es un proceso complejo que no debe de ser minorizado, ya que es la parte fundamental que da forma al esqueleto del sitio. Gran parte del éxito de un producto interactivo esta en lograr una comunicación clara y efectiva con el usuario, por lo tanto la arquitectura de la información se refiere a detallar tanto la organización como los contenidos de un producto interactivo. Los diseñadores gráficos somos esencialmente arquitectos de la información. La arquitectura de la información es indispensable para el diseñador y el equipo técnico para el desarrollo del marco conceptual, navegación e interfaz de un producto interactivo A través de la organización del contenido y el desarrollo de interfaces intuitivas, se crean experiencias del usuario.
PRODUCTOR
CONSUMIDOR
EXPERIENCIA DATOS
INFORMACIÓN
ESTÍMULO CRITERIO O CONCEPTO DE INFO PRESENTACIÓN ORGANIZACIÓN
COMPRENSIÓN USUARIO
CONTEXTO PERSONAL
LOCAL
GLOBAL
Arquitecto de la información • •
•
Persona que organiza los patrones inherentes a los datos de tal modo que haga claro lo complejo Persona que crea la estructura o mapa de la información que permite que otras personas encuentren sus propios caminos hacia el conocimiento Ocupación del siglo XXI para satisfacer las necesidades propias de la época concentrándose en la claridad, comprensión humana y en la ciencia de la organización de la información
041
INVESTIGACIÓN CREACIÓN RECOLECCIÓN DESCUBRIMIENTO
SABIDURÍA
CONOCIMEINTO
Bitácora 3 / 25 de junio 2012
¿Cómo se organiza la información? Según Maeda, la organización permite que un sistema complejo parezca más sencillo. • • • •
Recopilar y clasificar la información Segmentación de la información: división del contenido en unidades lógicas Establecer una jerarquía entre las unidades Utilizar la jerarquía para establecer relaciones y estructurar los vínculos entre unidades
Esquemas de organización Hay muchas formas de organizar la información, tener un esquema estructural para facilitar el acceso a la información de forma práctica y simple. Por lo tanto estas estructuras son flexibles y el que edita la información tiene la posibilidad de adaptarla y mezclarlas de la manera más adecuada y funcional para su fin. El objetivo de un esquema es el buen flujo de información, un buen diseño de esquema enfatiza el conocer al usuario para saber como va a navegar.
Exactos
Dividen la información en secciones bien definidos y excluyentes entre si. Estos esquemas requieren que el usuario conozca exactamente lo que busca (cronológico, alfabéticos, geográficos)
abcd
Diseño interactivo / especialidad en diseño de la información
Ambiguos
Dividen la información en categorías. Aunque en apariencia pueden ser mas versátiles son difíciles de diseñar, mantener y utilizar. Son útiles para el usuario porque no siempre sabemos lo que buscamos. La búsqueda en los sistemas ambiguos es iterativa e interactiva. La utilización del producto se da a través de un aprendizaje asociativo. Este tipo de sistemas de organización introducen un elemento de subjetividad, pero pueden ser muy valioso para los usuarios.
Temático
Organización de la información por materia o tema.
Funcional: Organización de la información en torno a un conjunto de procesos. Por públicos específicos
Bitácora 3 / 25 de junio 2012
Conducidos por metáforas
Las metáforas se utiliza para ayudar al usuario a entender la nuevo a través de lo conocido. Ej. El escritorio de una computadora de una computadora es una metáfora de la oficina (carpetas, archivos, papeleras, etc.)
Híbridos
044
No son muy utilizados porque generan una gran confusión entre los usuarios.
Estructura de la informaci贸n Secuencial
Una presentaci贸n secuencial es aquella en la que el autor decide la secuencia y manera en la que la informaci贸n es presentada. El usuario solo controla el ritmo.
Inicio bloque 1 bloque 2
045
fin
Bitácora 3 / 25 de junio 2012
Jerárquica (branching)
El usuario tiene cierto control sobre la secuencia de presentación de la información, seleccionando un grupo de opciones desde un menú principal. El autor mantiene el control decidiendo que incluir en las opciones accesibles en cualquier punto del programa. De arriba abajo. Las jerarquías proporcionaba una forma simple y conocida para organizar la información y son el punto de partida para iniciar el proceso de construcción de la arquitectura de la información. El enfoque de arriba abajo permite obtener de inmediato una visión de las dimensiones del proyecto, permite al usuario elaborar un modelo mental de la estructura de un producto. Ej. Árbol genealógico, organigramas, etc. Un esquema de estructura jerárquica debe contar con: • Amplitud: cantidad de opciones en cada nivel de la jerarquía • Profundidad: número de niveles
Jerarquía angosta y profunda: obliga a los usuarios a realizar una excesiva cantidad de clics antes de poder acceder a la información que buscan. Jerarquía amplia y poco profunda:
046
demasiadas opciones en el menú principal, con escasez de contenido en cada opción seleccionada.
047
Diseño interactivo / especialidad en diseño de la información
Bitácora 3 / 25 de junio 2012
Hipertextual:
Puede ser pensada como información web interrelacionada en la que el usuario se encuentra en control absoluto del ritmo, secuencia y contenido de la presentación. Los vínculos proveen un acceso a la información de forma aleatoria.
048
Hipertexto: el hipertexto es una forma de estructurar la información muy poco lineal. En sistemas de hipertexto, los fragmentos de contenido se unen mediante vínculos en un amplio tejido de relaciones. Comprende dos tipos de componentes principales que pueden conformar sistemas de hipermedios que unen partes de texto, datos, imágenes, vide y audio. Elementos o fragmentos de información que van a vincularse Vínculos entre esos fragmentos
Diseño interactivo / especialidad en diseño de la información
Diseño interactivo y diseño de la información Sheilla Pontis en su entrada de foroalfa, habla del diseño de la información y lo diferencia del diseño gráfio por su grado de análisis y el énfasis que da en el proceso de traducción de información compleja a clara. En el diseño interactivo, la principal tarea es diseñar interfaces amigables a su usuario, que den experiencias positivas. El vínculo entre ambas disciplinas es evidente y necesario.
• •
•
Uno de los objetivos del diseño interactivo es facilitar el acceso y comprensión de la información En ese sentido, el diseño de la información ayuda a la gente a entender el mundo a través de la interpretación de información compleja. El diseñador de la información traduce e un lenguaje visual los datos e ideas La esencia del diseño de la información es analizar, organizar, entender, solucionar y diseñar y su principal objetivo es la traducción de información compleja, datos no organizados ni estructurados, en información con sentido y de fácil acceso. El componente estético ocupa un lugar secundario dentro del proceso de diseño de la información, siendo el principal objetivo, la resolución del problema.
Concepto/ estrategia narrativa Una buena traducción y codificación de información, para un sitio web, considera antes que nada Qué se desea comunicar y a quién, se propone en clase la siguiente estrategia narrativa: ¿Cuál es mi objetivo y a quien me estoy dirigiendo? ¿Qué quiero comunicar? ¿Cómo voy a comunicarlo? ¿Qué requiero para lograrlo?
049
1. 2. 3. 4.
Bitácora 4 / 26 de junio 2012
La interfaz Cuando interactuamos con un objeto o con un sistema, surge una especie de diálogo entre el y nosotros, hay “algo” que esta entre nosotros y el objeto de interacción. La palabra interfaz puede ser interpretada desde varias perspectivas, por ejemplo; la interfaz como instrumento según McLuhan es una “prótesis” o “extensión” de nuestro cuerpo, el mouse es un instrumento que extiende las funciones de nuestra mano y las lleva a la pantalla bajo forma de cursor, así pues, la pantalla de una computadora es una interfaz entre el usuario y el disco duro de la misma; la interfaz como superficie, cuando se considera que la interfaz nos trasmite instrucciones (“affordances”) que nos informan sobre su uso. La superficie de un objeto (real o virtual) nos habla por medio de sus formas, texturas, colores, etc.; la interfaz como espacio, es el lugar de la interacción, el espacio donde se desarrollan los intercambios y sus manualidades.
050
Podríamos definir algunos puntos generales que la describen: • Es aquello que te permite completar una tarea • El buen diseño de la interfaz es determinante para que la calidad de la interacción entre un usuario y un producto sea optima.
Diseño interactivo / especialidad en diseño de la información
•
La interfaz puede compararse con el lenguaje común que comparten dos personas que dialogan, o con cualquier artefacto o idea que permita que dos agentes entren en relación: un enchufe es una interfaz que permite conectar un aparato a la res eléctrica Lo que finalmente ve o utiliza el usuario, aquello con lo que interactúa es la interfaz
051
•
Bitácora 4 / 26 de junio 2012
Reglas para el diseño de interfaces Tareas simples, interfaces simples; Tareas complejas interfaces complejas. Interactuamos con el mundo que nos rodea a través de cientos de interfaces. Muchas de ellas son tan conocidas y aceptadas que nos la reconocemos como tales. El diseño de interfaces analiza y pone en práctica procesos orientados a construir la interfaz más usable posible, dadas ciertas condiciones del contexto. El contexto dentro del cual se inscribe el diseño de una interfaz y la medida de su usabilidad, está dado por tres factores: • Una persona. • Una tarea. • Un contexto.
Persona
tarea
usabilidad contexto
052
Información de: http://www.gaiasur.com.ar/infoteca/siggraph99/disenode-interfaces-y-usabilidad.html#notas-al-pie
Diseño interactivo / especialidad en diseño de la información
Diseño Centrado en el usuario /user experience El diseño centrado en usuario tiene como filosofía resolver las necesidades concretas de un usuario final, consiguiendo la mayor satisfacción y mejor experiencia de uso posible con el mínimo esfuerzo de su parte.
053
Por lo tanto: • Una interfaz no puede ser confusa y debe facilitar al usuario su utilización • Un mal diseño no considera las necesidades del usuario • El primer paso es conocer al usuario y determinar ¿Qué es común a todos los seres humanos o aun grupo especifico de seres humanos? • También es importante determinar las diferencias entre individuos y grupos para así satisfacer las variantes de requerimiento en sus tareas • Realización de pruebas del diseño para observar las reacciones de usuarios concretos con el fin de comprobar si los conceptos de diseño utilizados proporcionan lo que realmente se espera del sitio. • Es muy importante observar si: • Si las ayudas en la navegación son suficientes para el usuario con el fin de evitar la perdida del sentido orientación a la forma en que ha sido organizada la información (íconos, gráficos, botones, mapas de sitio, índices, diagramas, etc.) • Como es el acceso a la información • Simplicidad y consistencia
Bitácora 4 / 26 de junio 2012
contexto
interacción
persona
interfaz de usuario
ex
pe
rie
nc
ia
Triáda fundamental del diseño centrado en el usuario
054
tarea/s
Diseño interactivo / especialidad en diseño de la información
Navegación El diseño de la navegación consiste en definir la arquitectura de nuestro sitio: elementos de interacción entre el usuario y el sistema, agrupar, seleccionar y crear relaciones. Mediante diagramas documentaremos el diseño de la navegación: organización de la información, relaciones y tipos de relaciones, acciones permitidas al usuario, etc... Una vez definida la arquitectura, debemos implementar los elementos de interacción en nuestro sitio: enlaces, opciones o menús de navegación, componentes de interacción (botones, cajas de texto, ....), etc. Así pues la navegación: • Tiene que ver con el conjunto de enlaces interactivos y gráficos que permiten a un usuario desplazarse y acceder a la información. • Una navegación consistente y predecible permite al usuario percibir visualmente la estructura y organización de un producto, así como su lógica.
055
El usuario debe poder predecir la respuesta del sistema ante su acción, para ello el nombre de los links menús de interacción deben ser significativos y precisos.
Bitácora 4 / 26 de junio 2012
Diagramas La representación mediante diagramas permite establecer la estructura, funcionamiento y comportamiento de un producto interactivo. La diagramación consiste en la representación de la organización de los contenidos del producto, el funcionamiento básico del mismo, las relaciones entre dichos contenidos y la ubicación que tendrán estos contenidos en la interfaz En el diseño de productos interactivos se utilizan distintos tipos de diagramas: diagramas de flujos, diagramas de navegación y diagramas de interacción. Hay dos tipos básicos: Blueprints o mapas de arquitectura y prototipos o wireframes.
Blueprints
Tiene como objetivo representar áreas de organización y rotulado y están enfocados en las aspectos estructurales y de funcionamiento del producto. Generalmente se representan con textos, cajas y flechas Estos mapas parten de lo general a lo particular, de lo general a lo concreto.
Prototipos
056
Son diagramas que definen el contenido y funcionalidad de un producto interactivo Los wireframes junto con los mapas de sitio son las principales herramientas del arquitecto de la información Los wireframes son representaciones esquemáticas de un sitio web que muestran la ubicación del contenido en la pagina y su funcionamiento (elementos básicos de interacción)
Diseño interactivo / especialidad en diseño de la información
Bitácora 4 / 26 de junio 2012
Sistemas operativos y navegadores
058
Es muy importante al momento de diseñar un sitio, considerar algunos temas que quizás pasaríamos por alto, si no nos lo dicen, esto es el investigar con qué equipo cuenta nuestro usuario, que sistema operativos suele usar. Es muy útil consultar las estadisticas de qué es lo más usuado, desde si se tiene más pc o mac y dentro de esto que sistema y navegador se utiliza más. Sabemos que no es posible tener al día todas estas variables, por eso se recomienda utilizar los estándares para diseñar.
Diseño interactivo / especialidad en diseño de la información
Sistema operativo Conjunto de programas de un sistema de cómputo destinado a administrar y compartir sus recursos, así como coordinar todas sus funciones. El sistema operativo comienza a trabajar cuando se enciende el equipo y gestiona –por ejemplo: la memoria, disco duro, pantalla, teclado, mouse, dispositivos de red, impresoras, etc.Los más comunes: Windows, Macintosh, Unix y Linux.
Navegador
059
Programa que permite visualizar la información que contiene una página web. Los documentos pueden estar ubicados en la computadora donde está el usuario, pero también en cualquier otro dispositivo que esté conectado a la computadora del usuario o a través de Internet, y que tenga los recursos necesarios para la transmisión de documentos. Algunos de los navegadores más comunes son: Firefox, Chrome, Safari, etc.
Bitรกcora 4 / 26 de junio 2012
VGA (640X480 PX)
SVGA (800X600 PX) XGA (1024X768 PX) MACINTOSH (1152X870 PX) SXGA (1280X1024 PX) UXGA (1600X1200 PX)
060
OXGA (2048X1536 PX)
Diseño interactivo / especialidad en diseño de la información
Se refiere al número de pixeles medidos horizontal y verticalmente que utiliza un monitor para mostrar contenido multimedia. Este dato nos permite definir el tamaño de nuestro interactivo, la resolución que escojamos debe de ser la más adecuada para nuestro usuario. Lo ideal al diseñar es también consultar el área segura de la resolución en que se visuaiiza una página, según su navegador, tener en cuenta esta área segura nos da la tranquilidad de que nuestro diseño estará pensado en que todas las variables y pueda verse adecuadamente.
061
SXGA+ (1400X1050 PX)
Resolución de pantalla
Proyecto final desarrollo de un interactivo
Sitio Los juegos de la palabra ¿Cómo proyectar un trabajo pensado para impresión en un producto interactivo digital? Abarcando un proyecto anterior, la realización de nuestras bitácoras de clase, se partió de la premisa de trasladar lo escrito y pensado y volverlo interactivo digitalmente. En mi caso, el trabajo a realizar era conceptualizar la bitácora de la clase de Teorías y prácticas de la representación e interpretación en su versión interactiva.
mostrarles el universo de una sola palabra
Primero respondí el siguiente temario del que partí: ¿Cuál es mi objetivo y a quien me estoy dirigiendo? Mostrar los alcances de la clase. Se dirige a estudiantes de diseño, diseñadores y personas que quieran entrar a esta maestría.
1º pensar en el usuario modelo al que me dirijo
¿Qué quiero comunicar? La diversidad y juego que puede desarrollarse al investigar y jugar con una sola palabra, siendo esta un signo lingüístico. El universo de significación de una palabra.
¿Cómo voy a comunicarlo? Hacer un diseño lúdico, reflexivo y delimitado a lo que se abordo en el curso.
¿Qué requiero para lograrlo? Combinar bien los elementos para que el sitio hable por si solo. Analizar los ejercicios y organizarlos visualmente. Quizá sintetizar todo el proceso y mostrarlo en un solo ejercicio. Mostrar las colecciones. Mostrar que se sigue una metodología y un proceso, mostrar el camino de análisis y reflexión.
¿què?
¿cómo?
Vacié los contenidos clave en el desarrollo del curso y los clasifique de forma accesible y dirigida a un usuario ajeno al tema. Utilice como etiquetas a mis organizaciones lo siguiente: Marco teórico- DesarrolloConclusión- Información extra.
CONTE
PICTO 1 PROCESO INTERPRETACIONES
ICONOGRAFÍA
TABLA DE POTTIER
Una vez que se dirigieron los contenidos lógicamente, hice un segundo mapa donde busque las relaciones entre ellas y las interconecte para crear intertextualidad. (mapa B).
MARCO TEÓRICO
PALABRA LENGUAJE
INVESTIGACIÓN DE SIGNIFICADOS
Siguiendo el temario y el modelo ejecutado en clase basado en ejercicios acomode los contenidos en forma lógica con las etiquetas anteriores, este primer mapa jerárquico (mapa A) ayudo a visualizar el contenido para ver que preponderaba sobre qué.
unión teóricopráctico
Desarrollo del concepto
HOME
EXTO
REFLEXIÓN
BIBLIOGRAFÍA
MÁS INFO
INFO DEL CURSO
PICTO 2
PICTO 3
PROCESO
PROCESO INTERPRETACIONES
ICONOGRAFÍA
TABLA DE POTTIER
INVESTIGACIÓN DE SIGNIFICADOS
INTERPRETACIONES
ICONOGRAFÍA
TABLA DE POTTIER
INVESTIGACIÓN DE SIGNIFICADOS
Mapa A. Mapa jerárquico final. Páginas siguiente, bocetos anteriores.
CRÉDITOS
repetición de contenidos hacer selección y edición de qué va y cuánto va.
EJERCICIOS
Boceto A. Este fue el primer cuadro que pensĂŠ para el sitio. MĂĄs o menos el final quedo
Bocetos B y C. Siguieron estos dos mapas, los vĂnculos y menĂşs se parecen, pero en realidad se simplifican para que no sea muy amplio y aburrido y confuso.
SEMIOLOGÍA DE SAUSSURE
CARACTERÍSTICAS DEL SIGNO LINGÜISTICO
MARCO TEÓRICO
SIGNO LINGÜISTICO
LA PALABRA
LOS JUEGOS DE LA PALABRA
EL LENGUAJE-LENGUA-HABLA SEGÚN SAUSSURE
SEGÚN SWAN
EL CONTEXTO FUNCIONES DE LA LENGUA
EL LENGUAJE Y LA REALIDAD
DIBUJO ANECDÓTICO
PALABRA E INVENTAR CONTEXTOS PICTOGRAMA
IDEOGRAM
INTERPRETACIONES PALABRA Y SU CONTEXTO PALABRA Y OTROS MATERIALES
DIBUJO LÉXICO
INVESTIGACIÓN SIGNIFICADOS LINGÜISTICO PERSONAL ETIMOLÓGICO
EXTRAS CULTURAL
TABLA DE POTTIER INFO DEL CURSO CRÉDITOS
LOS JUEGOS EN TORNO A LA PALABRA Y SU IMAGEN
BIBLIOGRAFÍA
INVESTIGACIÓN GRÁFICA
MA EVOCAR LA PALABRA
REFLEXIONES Mapa B. El temario del curso, simplificado, organizado y marcando las posibles relaciones y tipos de relación entre los temas del sitio.
Asocie los ejercicios con la parte teórica. Partiendo de este último mapa, empecé el bocetaje del sitio. Comencé con mi concepto de “juego” del juego de la palabra me base en el tipo de lectura del libro “Design, writing, research” y en el principio de la simplicidad, se creo un diseño en el que se interrelacionan los contenidos. El pictograma, dirige la navegación del sitio y de ahí se desglosa de lo general a lo particular. El sitio se desmenuza desde varias perspectivas, se indaga de manera deductiva a simple vista, pero a lo largo de las páginas se muestra un acercamiento ambivalente del concepto.
Bocetos homepage. Algunos ejemplos de cómo empecé a diseñar el homepage.
galer铆a de imagenes
ejercicio 1
marco te贸rico
marco te贸rico
animaci贸n
Wireframes. Algunos ejemplos de wireframes del sitio para crear las relaciones.
galer铆a de imagenes
ejercicio 2
reflexi贸n
Home
ejercicio 3 + info
pictogrmas bot贸n
galer铆a de imagenes
Decisiones de diseño Sobre las decisiones de diseño, estas también se delimitaron a los estudios de usabilidad en algunas variables como en el tamaño del documento y proporción y en la colocación del encabezado y menú superiores. Además basados en una retícula ortogonal, el diseño se acomoda en módulos que se repiten con menús secundarios y galerías propias en cada tema, que ejemplifican su contenido. Siguiendo el concepto de simplicidad en el diseño y mi concepto del juego de la palabra, empecé a bocetar algunas ideas para el home y algunas páginas, el resultado el siguiente.
Homepage. Con y sin retícula.
Te regresa al homepage
menĂş superior encabezado, presente siempre
te lleva a curiosos o mĂĄs info te lleva al ejercicio 1
te lleva a reflexiones
te lleva a ejercicio 2
te lleva a marco teĂłrico
te lleva a ejercicio 3
Decisiones de navegación El sitio tiene una navegación abierta, orientada al principio de hipertextualidad (como ya lo vimos en los mapas anteriones), el usuario tiene la decisión de manipular el sitio a su antojo. Se propone una navegación simple y con muchos recovecos para analizar. A la par de tener un home page muy simple, cada sección posee submenús que abren el espacio hipertextual y lo vinculan y relacionan con su proceso. El homepage cuenta con un encabezado y menú superior de 4 niveles (Marco teórico, Los Juegos, Reflexionemos y Curioso), ejemplos visuales del trabajo final de la clase: 6 de los pictogramas, que sirven de botones para mostrar las secciones y ejercicios (girasol, árbol, naranja, punto, la a y el asterisco). Adicional a ello, quise crear un dialogo paralelo con los globos de dialogo y apuntes que a veces suelen aparecer. Hay variables que permanecen a lo largo de las páginas como el encabezado y el menú superior.
Home
marco te贸rico
los juegos
ejercicio 1 ejercicio 2
ejercicio 3
reflexi贸n
+ info
PROCESO A GRAN
RIGE EL OBJETIVO COMUNICATIVO
DISEÑO DE
LA I NFO RM
BASE DEL PROCESO DE ADECUACIÓN DEL “QUE” AL “COMO” Y EJE REACTOR DE LA FORMA TANGIBLE Y DEL CONTENIDO.
IÓN C A
PUEDE SER CUALQUIER TEMA
CONCE ARGUMENTO
DISEÑADOR
PRO DEC
ACC
El resultado A continuación muestro imágenes de mi proyecto interactivo desarrollado en clase, así como la síntesis del proceso de diseño que aplique. Como vemos este esquema es la base del diseño de información, adaptable a cualquier producto de diseño a desarrollar, lo más importante es conocer los alcances y objetivos de lo que quiero comunicar para saber como traducirlo.
DISEÑO INTERACTIVO
LAZO DE RECONOCIMIENTO DEL “QUÉ” AL “CÓMO”
ESTRUCTURA: JERARQUÍA, DI HERRAMIENTAS: MULTIMEDIA
ESCALA DATOS
EXPERIENCIA COMPRENSIÓN INFORMACIÓN CONOCIMIENTO SABIDURÍA
EPTO
OCESO DE CODIFICACIÓN
CIÓN/REACCIÓN
DISEÑO CENTRADO EN EL USUARIO
INTERFACE NAVEGACIÓN
ISEÑO, ARQUITECTURA A, ANIMACIÓN, VIDEL, FOTO
LA FORMA TANGIBLE QUE RIGE EL DIÁLOGO DECISIONES DE ACCESO A LA INFORMACIÓN
EXPERIENCIA DE USUARIO ACCIÓN/REACCIÓN
ÁNALISIS DE SU EXPERIENCIA, USABILIDAD Y TRASCENDENCIA ESPACIO/TIEMPO
COHERENCIA NARRATIVA
CONCLUSIÓN El diseño interactivo, es un proceso. El diseñador determina la manera como aparece la información y los procesos a través de los cuales la alcanzamos, determina el comportamiento tanto de lo que diseña como de cómo se accede a él, la tarea del diseñador no sólo es la de disponer elementos, el diseñador conceptualiza, organiza, determina, preveé. La interacción responde directamente a una triada de información, el emisor, la interface y el usuario final. Estos tres elementos son básicos en el proceso de la interacción. El resultado de llevar una información a su nivel intertextual, responde a la necesidad de re-diseñar, re-organizar un contenido de naturaleza lineal a una nueva narrativa. Esta nueva narrativa, da la posibilidad de una expresión no vistos desde un solo punto de vista, amplia el horizonte de las alternativas de comunicación, amplia la experiencia de usuario y sobre ella valida su conceptuzalización. El diseño interactivo responde a las preguntas que otro se hace, es diálogo y es acción. El trabajo de concepualizar y trasladar un proyecto al nivel intertextual, es un proceso complejo que debe de llegar a ser un producto final simple y relevante a su usuario final.