- Diseño Centrado en el Usuario

(Lenguaje Computacional 3) - e [ad] PUCV

Bitácora de clases     c1   c2    c3   c4    c5   c6   c7    c8   c9   c10 

Ejercicios y Tareas

Profesor: Jorge Barahona Chamorro
Especialista en Arquitectura de la Información y Diseño de Interfaz de Usuario
Alumno: Gonzalo Vásquez G
Estudiante de Diseño Gráfico

Arquitectura de la información
Administración de los contenidos
Administración del conocimiento
Diseño de la interfaz
Diseño de la información
Administración de la relación con el cliente
Administración de las marcas
Diseño de la interacción
Usabilidad
Diseño de la experiencia

                                                                                                                                                    

23/06 Clase Primera.                                                                         arriba siguiente

Introducción al Diseño Centrado en el Usuario:                                                                               
La Arquitectura de la Información

Acerca de:        'De la Arquitectura de la Información'
                        'Los elementos y las experiencias del usuario'

El diseño actual es el que debe realizarse centrado en las necesidades del usuario,
es decir 'usar' es el verbo que se debe tener siempre presente.

'El sitio web sólo existe durante el tiempo en el cual es accedido por el lector.'

Es el diseño que se esfuerza por crear experiencias positivas en los usuarios,
'el mejor diseño es aquel que no se vé', asi como también la objetividad del diseño
se describe sobre la base de una evidencia.

La visión de un producto o servicio puede o debiera acompañar al cliente
en todo el ciclo de vida del mismo.

Asi mismo el sitio web, o cada sitio web es en sí el producto,
el diseñador crea la interacción del usuario.

Asi se tiene que factores como son la estructura, el orden y lo estándares del área al
que pertenece modelan la usabilidad del sitio

La llamada 'Home Page' no es igual a una portada, pues la internet es multidimensional.

Todo diseño debe de empezar desde el minimalismo, puesto que la interacción se 
traduce en coordenadas de tiempo .

El diseño se cuestiona desde el punto de vista comunicacional con el usuario.

AI.   Arquitectura de la información en Chile.

 

..........................................................................................................................................................................

 

28/06 Seminario Abierto de Blogs

La palabra Blog corresponde a una conjunción de dos palabas en inglés:
Web y Log, es decir, bitácoras de internet.

Este seminario abordó el tema de la publicación electrónica desde el punto
de vista de la bitácora, es decir, como la publicación de cierta "crónica" periódica.
El potencial de esta herramienta -que bien puede ser colaborativa- es evidente
tanto para el trabajo universitario como para el estudio en general.

Esta charla contempló los siguientes aspectos:

- La definición de concepto Blog.
- La realidad mediática del Blog.
- La potencia como tendencia de publicación
  (Conformación de comunidades o grupos).
- La globalidad de los Blogs y las herramientas de sindicación de contenidos
  (Feeds, RSS, Atom, etc.)
- La plasticidad de los contenidos y su independencia respecto de la presentación gráfica
  (Importancia de las Cascadas de Estilo o CSS).
- La definición de la Web Semántica.
- Los distintos tipos de Blog.
- Una experiencia práctica: generar un Blog en La Coctelera.

..........................................................................................................................................................................

 

30/06 Clase Segunda.                                                                     arriba  siguiente       

Arquitectura de la información:
Organización del espacio web

El diseñador se hace 'arquitecto' del habitar en de un sitio web, ya que construye
el espacio multidimensional de la navegación, es decir el sitio se construye en primera medida,
en base a su utilización.

Los medios digitales son habitables ya que el diseñador construye un espacio sobre la base de
los comportamientos en la web, se preocupa de cómo los usuarios utilizan los recursos ofrecidos
en la web y de como esta se hace más adaptable.

Se dice que el buen diseñador se hace notar cuando su trabajo no es visible.

El diseño concierne por sobre todo a la puesta en práctica de la arquitectura de la información.

Principales exponentes de la teoria y
la arquitectura de la información en el diseño gráfico

..........

Edward Tufte

Del diseño gráfico aplicado a la internet como medio.

Cómo se transforma la información en comunicación, una formación competente para el oficio,
de la cual nace la web semántica.

Edgard Tufte es llamado el padre de la infografía, él establece que el problema radica en cómo se
transforma el 'dato' a información y luego en comunicación.

Tufte establece que el diálogo gráfico debe poseer una metáfora de trasfondo.

Lo importante en la intrerpretación de la información es el contexto en el que se sitúa.

Establece un proceso de creación material gráfico:

Propósito
publicación
descubrimientos
monitorización

Recopilación de datos
relevancia
categóricos, cuantitativos, secuenciales

Refinamiento de datos
estadística
ordenación

Metáfora visual
sentencia, tabla.
tipo de gráfico

Experimentación
tipografías
colores
insuficiencia de datos
variaciones

..........

Jesse James Garret

Define como las personas procesan la información y construye las relaciones entre
sus diferentes elementos.

Diseño visual

diseño de la información
diseño de la interfaz
diseño de la navegación

diseño de la interacción
arquitectura de la información

especificaciones funcionales
requerimientos de contenido

necesidades del usuario
objetivos del sitio

..........

Louis Rosenfeld

Propone el uso de herramientas, técnicas y experiencias de disciplinas
que plantean la información como algo valioso importante por sí mismo
pero siempre guiado por el contexto en el que se inscribe.

Contenido que aparece al Usuario situado en un Contexto

La arquitectura de la informaión se transforma entonces en 'la cola que mueve al perro'.

Se plantea el problema de como cautivar al usuario, el cual esta inscrito tambien en su propio
'contexto' y accede a la información que esta estructurada de una forma determinada por
ciertos criterios propuestos por la aplicación de la arquitectura de la información.

En ciertos casos se puede dar que el sitio web mueva a la compañía, no la compañía a la web.

..........

Meter Morville

El arte y la ciencia de organizar y etiquetar para apoyar las
capacidades de uso y búsqueda es la base de la arquitectura de la información.
Se refiere a nombrar

Ese contenido se apoya en una Interface adecuada, esquemas y planos.

Método
esquemas de clasificación
uso del diccionario

entregas de AI
planes de proyectos

La AI es como un panal de abejas

Utilizable Útil Deseable
Valioso
Encontrable Creíble Accesible

 

El usuario asimila el contenido, ese contenido que tiene directa relación con
el contexto en el que se sitúa y que debe de cumplir una serie de características,
cono son:

necesidades, estructura, cultura
conductas, significado, tecnología

La arquitectura de la información es, o debiera de ser, casi invisible
a los ojos del usuario/lector.

..........

Nathan Shedroff

Escritor especialista en arquitectura de la información, autor de 'Experience Design'
en el que trata principalmente el tema de la conversión de datos a información.

..........

Richard Saúl Wurman

Desarrolla sobre la organización de los patrones de la información y
organización numerológica y coherente.

..........

Javier Cañada

Uno de los principales exponentes de la teoría de la arquitectura de la información
en latinoamérica.

..........

Juan Carlos Camus

Aborda la temática de la incorporación de la arquitectura de la información en forma
directa al mundo de las empresas y el mercado.

..........

...........................................................................................................................................................................

 

07/07 Clase Tercera.                                                                         arriba siguiente

La usabilidad:
Desbloquear el potencial en la Internet

Acerca de:        'Como el usuario tiene exito, o fracasa
                         en la utilización de los sitios web'

El diseño debe comenzar desde la observación que es, consecuentemente,
la primera preocupación en la escuela.

Es decir se comienza siempre por un planteamiento determinado de un problema
a resolver, y mediante la observación se logra plantear o proponer un resultado sensible.

La usabilidad se preocupa de comprender los factores, las herramientas técnicas,
todos los problemas y variables a considerar en el uso de la interfaz por el usuario;
todo lo cual lo que mide en cierta medida el éxito de 'lo que se hace' en terminos de
la comunicación.

Se establecen así distintos tipos de evaluación de un sitio:

'En la economía tradicional el cliente primero paga y luego usa.
En la internet, el cliente, primero necesita saber usar para luego comprar'
-Jacob Nielsen

Evaluación de un sitio Web
evaluar el comportamiento del servidor del sitio
evaluación Heurística

Elementos de una evaluacion

Objetivos de una evaluación
conocer los precedentes. análisis de logs, entrevistas a usuarios,
comentarios con los clientes, empresas.
criterios generales para evaluar un sitio

Criterios de evaluación del comportamiento del servidor del sitio
medir y evaluar el estado actual del sitio y su comportamiento
número de páginas visitadas (en general y en particular).
tiempo de estancia del usuario (en todo el sitio y en cada página).
ratios de conversión de usuario al cliente.
ratios de acierto/error en las transacciones.
caminos que sigue el usuario en su visita (referencias de buscadores,
acceso a secciones y páginas, salidas.
calidad de servicio del servidor
calidad de los procesos para concretar actividades.
feedback del usuario (contacto, email, chat, tiempo real, teléfono, otros)

Conocer los precedentes
analisis de logs
entrevistar a usuarios.
comentarios de clientes, usuarios.
recopilar información clave para poder identificar elementos que ayudan
o entorpecen la operatividad del sitio.

Evaluación Heurística (cuestionamientos)

El sitio web debe ser fácil de manejar
Es fácil encontrar la información deseada dentro del sitio.
Los enlaces están claramente identificados.
Los enlaces funcionan perfectamente.
El uso de las imágenes es aceptable.
El diseño general del sitio es apropiado al contexto.
La organización de la información es apropiada.
El contenido del sitio es relevante.
La interfaz del sitio es placentera/acogedora.
El sitio le permite entrar fácilmente.
El sitio posee todas las capacidades necesarias.

...........................................................................................................................................................................

14/07 Clase Cuarta.                                                                           arriba siguiente

La Accesivilidad:
Primera característica de la Usabilidad

Acerca de:        'De la universalidad de un sito web,
                        la Accesivilidad, cualidad de la Usabilidad'

Todo diseño comienza desde una ordenación básica prevista con anterioridad
en las etapas del diseño previas a la construcción de la página.

Mientras mas accesible un sito web se presenta a sus lectores, éste se hace mas universal.

Todo factor de la accesivilidad apunta directamente a la experiencia del usuario,
al 'look and feel' del sitio, su 'aparecer' al lector, puesto que un diseño que no logra
construir una relación compleja con el usuario no le da a este la confianza necesaria
por lo que fracasa en su integración a la vida del lector.

.....................

Guías de contenido web - Accesivilidad 1.0
Web Content Accessibility Guidelines 1.0
W3C Recommendation 5-May-1999

....................

Acerca de la utilización de Cascadas de Estilo (CSS) a favor de la accesivilidad en la web.

Using Style Sheets for Web Accessibility

..................

Recursos y herramientas de software utilizadas en el proceso de diseño
que considera la accesivilidad para el usuario como uno de los factores clave
en la construcción de la experiencia.

Web Accessibility Resources - By joel Sklar

..................

Boston-IA - Uniéndo la Arquitectura de la Información y la Accesivilidad de la Red.
Boston-IA - Bringing Information Architecture and Internet Accessibility Together

Boston-IA is an organization of information architects, information designers, web designers,
visual designers, usability specialists, educators, and other internet professionals concerned
about the usability and accessibility of electronic media.

What does IA stand for? It could stand for "information architecture",
but it also stands for "internet accessibility".

We believe that information architecture means making things clear for people,
and that internet accessibility means making things available.

Existen numerosos medios de aplicación y herramientas para los diseñadores que permiten
aplicar criterios estandarizados y

...........................................................................................................................................................................

21/07 Clase Quinta.                                                                           arriba siguiente

AI + Usabilidad:
De la Administración de los Contenidos

Acerca de:        'La utilización de Mapas de Navegación y
                        de Wireframes en la ordenación del sitio'

El Problema principal de la web se manifiesta no en la aplicación de tecnología y
la ingeniería, sino que en cambio en la ejecución del diseño que la modela.

En ese sentido es coherente que el diseño comience primero preocupándose de la
organización del los contenidos como base estructural para la usabilidad del mismo.

Asi aparece entonces el llamado 'diseño de la información' asi como la ingeniería
o 'software architecture' lo que hace al diseñador en un 'arquitecto de la información'.

En un comienzo a la administración del contenido el diseño parte por etapas 'externas'
a él, como son las llamadas investigaciones comparativas o 'benchmark' studies,
en los cuales se analiza en detención el entorno en el que se inscirbe el tema, entidad
coorporativa o trasfondo del espacio web en construcción.


Todo diseño debe estar primeramente al servicio de la comunicación, y para asegurar
este traspaso aparecen definidos una serie de pasos que describen básicamente
la metodología que surgue en el proceso de diseño:


0. recepción del encargo (necesidades y requerimientos)

1. benchmark (realización de estudios comparativos)

2. usabilidad (estudios de usabilidad, test de usuarios)

3. arquitectura de la información (organización de los contenidos)

4. diseño de la interfaz del usuario (construcción de idiomas universales)

5. programación / producción (etapas de desarrollo)

6. entrega (simbólica) del encargo


Asi mismo dentro de la arquitectura de la información se describen también
etapas de trabajo, las que modulan la ordenación de la información.

Aparecen entonces las faenas de estructuración y planeamiento; 'card sorting',
organización y coherencia linguística; taxonomía y la redacción.

Se realizan los primeros mapas de esa estructura, que distrubuyen los contenidos
y construyen la página de manera coherente para su lectura e interacción del lector.

Se proponen y definen los wireframes que demarcan la geometría interna
de la página, la distribución de de los contenidos en directa relación al
espacio físico de la pantalla y su visualización.

.....................................................................................................................................

28/07 Clase Sexta.                                                                           arriba siguiente

Del Proyecto: construcción de un sitio web
en base a una carpeta de título de diseño Industrial.

La navegación de un sitio aparece en la estructuración y la arquitectura de elementos de interacción entre el usuario y el sistema, es decir los elementos que hacen de puente entre el usuario y dicha información, corresponden a enlaces, menúes ordenados, y a su distribución ordenada en la pantalla, por categorías o propiedades, sintácticas o gráficas todo lo cual es respuesta del sistema y aparece como la interfaz ante los requerimientos del usuario.

En la construcción y el planeamiento inicial del diseño de la navegación podemos usar el vocabulario gráfico propuesto por Jesse James Garrett para la arquitectura de la información en el diseño de los mapas de navegación de un sitio:

Asi mediante el uso de diagramas aparecerá el diseño de la navegación general del sitio y su posterior reflejo en la interfaz de este:

Jesse James Garret, arquitectura de la información.

.....................................................................................................................................................................

11/08 Clase Septima.                                                                           arriba siguiente

Clase primera de corrección individual
de algunos de los aspectos del proyecto.

Presentación del índice de la carpeta: Es la organización semántica, lógica y la separación estructurada de la información a presentar en cada tipo de página y su navegación en relación a las demás.

El mapa de contenidos: Corresponde al mapa de navegación en el que se muestra la distribución general de todo el sitio en relación a la distribución ordenada de estos, la cual comienza a partir de el índice.

Los wireframes se constituyen como la representación inicial del concepto de la navegación de cada página individual en concordancia con todos los aspectos de la usabilidad en la distribución de los elementos y el contenido en la pantalla.

 

..............................................................................................................................................................

18/08 Clase Octava.                                                                           arriba siguiente

Acerca del encargo:
Corrección individual y evaluación del trabajo

Aspectos generales a evaluar,
pasos que además se constituyen como el proceso constructivo específico de un sitio web, cualquiera sea este.

Indice de contenidos > Mapas de Navegación > Wireframes > Maqueta de interfaz > presentación de un Beta > Tests Heurísticos > Correcciones generales y específicas > presentación del Alfa > Entrega (simbólica).

.................................................................................................................................................................