DCU

Diseño Centrado en el Usuario

Clase nº1

23 de junio del 2005

Diseño Centrado en el Usuario

El diseño centrado en el usuario es un diseño que se esfuerza por crear experiencias que van más allá de los productos y servicios

Como un diseñador se inserta en esta visión de diseño

Diseño de la interacción: como se desenvuelve con el sistema
Usabilidad, standares, cuestionar el trabajo.

Experience Design?

La visión de un producto o servicio que puede acompañar al cliente en todo el ciclo de vida del mismo.
La interfaz es el producto.
Usabilidad- como recoje el ojo la pantalla(eyetraking)-test de criterios de la usabilidad
Hay una diferencia sustancial entre presentación y organización

Mapa de Navegación
Home

Experience Design, como?

El enfoque persona es de gran ayuda en la planificación del diseño porque proporciona una persona real para la que crear el producto digital

Clase nº2

30 de junio del 2005

Arquitectura de la información
Organizando un sitio web

Lingüística-semántica-semiótica

Los medios digitales se habitan ya que uno construye un espacio sobre la base de los comportamientos en la web, uno se preocupa de cómo los usuarios ocupan la web o como se hace más adaptativa.

El buen diseñador se hace notar cuandosu trabajo no se vea, el buen oficio nunca se ve.

Cuando alguien no hace bien su trabajo, hay falta de diseño.

Porqué el diseño debe preocuparse de la Arquitectura de la información?

Edgard Tufte
(http//www.edardtufte.com)

Cómo se transforma la información en comunicación
Formación competente para el oficio, web semántica.La importancia de Edgard Tufte fue que transformó los datos en información (es llamado el padre de la infografía), el problema está en cómo se transforma la información en comunicación.
Ej:carta sinoptica del tiempo.Diálogo gráfico
Tiene metáfora“Lo importante en la información es el contexto, lo que más importa, como construirla.”Proceso de creación de un gráfico

Cual es el propósito

Ej: diseño de las líneas del metro de Londres (diseñado por un electricista)

Jesse James Garret
http//www.jjg.net.

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

Diseño visual

Louis Rosenfeld
www.louis rosenfenfeld.com

Usa herramientas, tecnicas y experiencias de disciplinas que ven la información como algo valioso importante por sí mismo Contenido Usuario contexto Por ejemplo: el contesto , h1, h2, h3, es la cartesiana“ La arquitectura de la informaión es la cola que mueve al perro.Como cautivar al usuario.El sitio web mueve a la compañía, no la compañía a la web.

Meter Morville
http//www.semanticstudios.com

El arte y a ciencia de organizar y etiquetar para apoyar las capacidades de uso y búsqueda.

La arquitectura de la información es casi invisible.

La AI es como un panal de abejas

Clase nº3

07 de julio del 2005

Evaluación de un sitio Web

Tipos de evaluación a un sitio

Evaluar el comportamiento del servidor del sitio
Evaluación Heurística; en la economia tradicional el cliente primero paga y luego usa, en internet, el cliente primero necesita saber usar y luego compra.
En Internet, la interfaz es el producto.

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 vistas (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/entorpecen la operatividad del sitio.

Evaluación Heurística

1.- El sitio web debe ser fácil de manejar
2.- Es fácil encontrar la información deseada dentro del sitio.
3.- Los enlaces están claramente identificados.
4.- Los enlaces funcionan perfectamente.
5.- El uso de las imágenes es aceptable.
6.- El diseño general del sitio es apropiado.
8.- La organización de la información es apropiada.
9.- El contenido del sitio es relevante.
10.-La interfaz del sitio es placentera.
11.-El sitio le permite entrar facilmente.
12.-El sitio tiene todas las capacidades.

Clase nº4

14 de julio del 2005

Criterios de accesibilidad de páginas web

Según la W3C-WAI (Web Accesibility Initiative del World Wide Web Consortium) las causas más importantes de falta de accesibilidad muchas páginas web para todos los usuarios, y a las que los diseñadores deben prestar por tanto mayor atención, son las siguientes:

Falta de estructuración en las páginas que desorienta al usuario y dificulta la navegación.
Abuso de los elementos estructurales de HTML con el único propósito de la maquetación y distribución en pantalla del contenido de la página.
Basarse excesivamente en la información gráfica (imágenes, mapas de imagen, tablas usada para formatear columnas, marcos, scripts Java, elementos multimedia, etc) sin proporcionar adecuadas alternativas de texto u otro formato complementario.
Los problemas de accesibilidad causados por este tipo de páginas se acentúan especialmente para aquellos usuarios que por su discapacidad u otros motivos, utilizan lectores de pantalla que dirigen el contenido de la imagen a una síntesis de voz, una línea Braille o un emisor de morse,
utilizan navegadores de síntesis de voz (como pwWebSpeak) que interpretan directamente el código html, en lugar de su representación en la pantalla,
utilizan navegadores sólo-texto (como Lynx o Net-Tamer) que sólo pueden mostrar el texto de las páginas web.
Desde distintas entidades preocupadas por el tema de la accesibilidad en la red se han elaborado guías para el diseño de páginas web accesibles. Todas estas guías son muy similares en sus recomendaciones y varían únicamente en la presentación y organización de dichas recomendaciones, así como en el énfasis que hacen sobre cada una de ellas. En general se pueden agrupar estas recomendaciones en las siguientes áreas:

Diseño general de la página y sitio web.
Presentación del texto
Características gráficas
Características especiales, programación y multimedia
Conviene tener en cuenta que la nueva especificación de HTML 4 ha introducido nuevos elementos que no existían en el momento en que se redactaron las guías pero que facilitan la accesibilidad en los siguientes aspectos:

Mejor estructuración de las páginas con nuevos elementos descriptores como ABBR (abreviación) y ACRONYM (acrónimo) y elementos para facilitar la presentación linear de las tablas en los navegadores.
Separación de contenido y formato mediante hojas de estilo en cascada y más posibilidades de maquetación.
Nuevos elementos para definir contenido alternativo para los formatos que puedan ser innaccesibles. Por ejemplo aparece la etiqueta LONGDESC para proporcionar un párrafo o enlace a una página donde aparezca la descripción textual de un objeto o imagen y la etiqueta TITLE para proporcionar el título del elemento.
Navegación y orientación más fáciles. Por ejemplo el atributo ACCESSKEY permite especificar una tecla para activar un enlace, campo de formulario

Clase nº5

21 de julio del 2005

Por que construir páginas sencillas

Aunque el auge de la usabilidad es reciente, debido sobre todo a la difusión de la obra del "gurú" Nielsen, que recoge como uno de los principios fundamentales el diseño minimalista, lo cierto es que esta disciplina ha existido desde hace tiempo, aunque con otros ropajes. Nos estamos refiriendo a la Ciencia de la Interacción Hombre-Ordenador ("Human Computer Interaction").

Este cuerpo de principios continúa aumentando a medida que se realizan nuevas investigaciones y continúan generándose nuevos resultados. No podemos esperar que las guías de diseño y las directrices nos resuelvan todos los problemas.

Pero veamos ahora cómo podemos usar los resultados de la HCI en una tarea aparentemente tan prosaica como es el diseño Web. A continuación resumimos los principales resultados de la investigación en una serie de consejos que conviene tener en cuenta.

Páginas a rebosar...

¿Cuantas veces hemos perdido tiempo buscando una información importante entre todo el texto y los gráficos de una página?. Ello sin tener en cuenta el esfuerzo mental que supone y la posibilidad de que cometamos un error y pasemos por alto nuestro objetivo.

Lo diseñadores paracen sufrir de una especie de "horror vacui" que les obligar a rellenar cada posible hueco, quizá porque piensen que su presencia es un signo de falta de elaboración. Pero han de tener en cuenta que un usuario no va a visitar sólo su sitio Web, sino que si se deja caer por él, debemos facilitarle la tarea y permitirle decidir rápidamente si tenemos algo que le interesa y tener claro qué es. Además, la carga de páginas "pesadas", sobre todo si tienen imágenes, es un lastre para la percepción positiva que pudiera tener su visitante.

En varios estudios, algunos de ellos de la NASA, se ha calculado que el porcentaje óptimo de pantalla activa no debe ser mayor de un 20 a un 60 % . Claro está que estos resultados se obtuvieron con pantallas estáticas sin posibilidad de scroll.

Si en las pantallas de información táctica sólo se presenta la información estrictamente necesaria para llevar a cabo la tarea y de la forma más sencilla posible, ¿por qué no hacer nosotros lo mismo?.

En resumen, es recomendable usar el menor número posible de elementos por pantalla. Si hay elementos que no va a necesitar todo el mundo, es mejor no presentarlos y darlos sólo bajo demanda.

Estas recomendaciones se vuelven primordiales cuando nos movemos a un entorno en que los recursos de visualización son más limitados, como WAP o PDA.

Lo sencillo es difícil de crear

Bien, ya me he convencido de que cada pantalla no debe estar muy cargada, pero ¿cómo lo consigo, sobre todo si tengo mucha información que enseñar?. La respuesta es: eliminando elementos superfluos y agrupando la información. Se trata de presentar cercanos los elementos más semejantes, lo que garantiza además su rápida localización, dado que la página tendrá una estructura visual agradable y efectiva. Para ello hemos de solucionar las siguientes cuestiones:

• Número de agrupaciones y qué agrupaciones: Este es un problema de arquitectura conceptual. Se trata de encontrar la mejor categorización que permita una representación efectiva. Para llo cada grupo debe ser significativo, y el número de grupos y de elementos de cada grupo debe ser adecuado, ni muy pequeño ni excesivo.

• Formato: ¿Cómo se van a diferenciar los grupos de información entre sí?. ¿Separados por espacios en blanco?, ¿con bordes?, ¿con colores?, ¿con una combinación de los anteriores?. Hay tanto factores que pueden interactuar que quizá lo mejor sea realizar varias propuestas y seleccionar la que mejores resultados proporcione para a tarea, pero en general el agrupamiento físico suele ser el que mejores resultados proporciona.

Benchmarking

Herramienta de gestión que basa su metodología en la identificación de las mejores prácticas para utilizarlas como referencia. Consiste en un proceso sistemático cuyo objetivo es evaluar, comprender y comparar procesos operativos, productos y/o servicios propios, con aquellos relativos a prácticas reconocidas como más eficientes y líderes. Fundamentalmente se aplica para la mejora de procesos ayudando a la toma de decisiones que apoyen acciones encaminadas hacia su mejora.

Clase nº6

14 de julio del 2005

Diseño de la Navegación

El diseño de la navegación consiste en definir la arquitectura de nuestro hipermedia: elementos de interacción entre el usuario y el sistema, enlaces y tipos de enlaces entre los nodos, agrupación de los nodos por categorías o propiedades, y respuestas del sistema ante peticiones del usuario.

Para diseñar la navegación podemos usar el vocabulario gráfico propuesto por Jesse James Garrett para la descripción de la arquitectura de la información y el diseño de la interacción:
http://www.jjg.net/ia/visvocab/spanish.html

Mediante diagramas documentaremos el diseño de la navegación: organización de la información en nodos, los enlaces y sus tipos, acciones permitidas al usuario, etc...

Una vez definida la arquitectura, debemos implementar los elementos de interacción en nuestro hipermedia: enlaces, opciones o menús de navegación, componentes de interacción (botones, cajas de texto, ....), etc.

La interacción usuario-hipermedia debe poder realizarse con la menor carga cognitiva para el usuario, por lo que se recomienda:

• Evitar la sobrecarga memorística: Los menús o barras de navegación deben contener un máximo de 7 opciones diferentes.
• El usuario debe poder predecir la respuesta del sistema ante su acción, para ello el nombre de los enlaces y componentes de interacción debe ser significativo y preciso. Los globos de texto pueden ser de muhca utilidad en este sentido.
• Se debe ofrecer asistencia al usuario en procesos de interacción complejos (formularios, etc...).
• Los mensajes de error deben ser explicados de forma clara y no alarmista, indicando al usuario vías alternativas para resolver el problema.

---