3.DCU Diseño Web Parte Repaso 2014 15

Dra. Sandra Baldassarri

Tema 3. Diseo web. Aplicacin de los

principios de diseo centrado en el usuario

30258- Diseo Centrado en el Usuario.

Diseo para la Multimedia

30258 Diseo Centrado en el Usuario Diseo para la Multimedia

Objetivos

Conocer los principios de diseo centrados en el

usuario y su aplicacin al diseo web y multimedia.

Repaso:

Definir tareas

Anlisis de Tareas

Dilogos

Diseo de la interfaz y diseo visual:

Reglas de diseo

Guas de estilo

Normativas


El proceso de diseo

Diseo

Iteracin: Prototipado y Evaluacin Tcnicas de prototipado

Tcnicas de evaluacin

Definir tareas:

Anlisis de tareas: HTA: Anlisis jerrquico de tareas

Dilogos: Diagramas de secuencias

Definir estilo Guas

Estndares

Reglas


Una de las premisas de cualquier aproximacin con la que abordemos el diseo es: conocer al usuario y cmo realiza las diferentes tareas.

Tarea: Unidad significativa de trabajo en la actividad de una persona (sobre una aplicacin).

El primer paso en el diseo de un sistema interactivo es el anlisis de las tareas que el usuario debe realizar. Esta informacin se recoge con una notacin que permita

su formalizacin y estudio.

Anlisis de tareas

Ref: Transparencias IPO


Anlisis de tareas

La descripcin de las tareas se suele utilizar para imaginar nuevos sistemas o dispositivos.

El anlisis de las tareas se utiliza para investigar una situacin existente.

En el anlisis de tareas hay que determinar:

Informacin que necesita el usuario para realizar una tarea (qu hacer).

Terminologa y smbolos del dominio del problema (elementos).

Descripcin de cmo se realizan esas tareas actualmente (cmo).


http://webdiis.unizar.es/asignaturas/DCU/wp-

content/uploads/2014/02/6-Dise%C3%B1o_ParteI.pdf


Existen diferentes tcnicas:

GOMS

Familia de tcnicas propuesta para modelar y describir las prestaciones de las tareas desde el punto de vista humano.

GOMS es acrnimo de: Objetivos (Goals), Operadores (Operators), Mtodos (Methods) y Reglas de seleccin (Selection Rules).

Modelo entidad-relacin

Considera las entidades no computacionales (como objetos fsicos) y las acciones realizadas con ellos. Esta tcnica se asocia normalmente

con diseo de bases de datos y programacin orientada a objetos.

Anlisis Jerrquico de Tareas (HTA)

Es la tcnica ms popular. Se estudiar en detalle.

Anlisis de tareas



Anlisis jerrquico de tareas (HTA)

Incluye dividir una tarea en tareas ms simples, de forma

recursiva. stas se agrupan como planes que especifican

cmo se deben llevar a cabo esas tareas en la prctica.



El dilogo es el proceso de comunicacin entre dos o ms participantes.

En el diseo de interfaces de usuario, el dilogo representa la estructura de la conversacin entre el usuario y la computadora, a travs de una aplicacin o sistema concreto.

Existen diferentes mtodos de representacin de dilogos: Diagramas de transicin Gramtica User Action Notation Diagramas de secuencias (UML)

Dilogos


http://webdiis.unizar.es/asignaturas/DCU/wp-

content/uploads/2014/02/6-Dise%C3%B1o_ParteI.pdf


Diagramas de secuencias (UML)

Describen el comportamiento dinmico entre actores u objetos y el sistema.

Permiten realizar una representacin cronolgica y precisa de las interacciones entre los objetos:

Describen interacciones, objetos y sus relaciones.

Describen los mensajes que intercambian.

Ordenan temporalmente los mensajes.

Dilogos


El proceso de diseo

Diseo

Iteracin: Prototipado y Evaluacin Tcnicas de prototipado

Tcnicas de evaluacin

Definir tareas:

Anlisis de tareas:

Dilogos:

Definir estilo

Guas

Estndares

Reglas


Proceso de diseo

El diseo de un sistema interactivo implica considerar:

Diseo de la interaccin

Sistema global

Reglas de Usabilidad y Accesibilidad (UNE, ISO)

Guas de estilo

Diseo de la interfaz

Reglas de diseo:

Pantallas y Distribucin / Maquetacin (layout)

Guas de estilo


http://webdiis.unizar.es/asignaturas/DCU/wp-content/uploads/2015/02/6.-

Dise%C3%B1o_Interfaz.pdf



Reglas de diseo

Agrupacin de elementos

Orden de los elementos

Decoracin:

fuentes,

bordes,

cajas, etc.

Alineacin de los elementos

Espacios en blanco entre los elementos




Accin y control del usuario

El usuario debe saber en todo momento qu debe hacer y cmo debe hacerlo.

Hay que disear:

Entrada de informacin: formularios y cuadros de dilogo, ordenacin lgica.

Saber qu hacer: elementos activos, consistencia en el estilo de ayuda, etiquetas e iconos




Apariencia apropiada

La apariencia general de la interfaz es muy importante para propiciar un uso correcto y

satisfactorio para el usuario.

Hay que disear:

Presentacin de la informacin: objetivo, interactividad

Esttica y utilidad

Color y 3D

Localizacin e internacionalizacin: culturas, globalizacin Ref: Transparencias IPO



Reglas de diseo

Reglas que debe seguir el diseador para lograr o mejorar la usabilidad de un sistemas

Las reglas se pueden clasificar segn: Autoridad: exigencia o recomendacin

Generalidad: amplia o para una aplicacin concreta



Hay distintos tipos de reglas: principios,

estndares y guas.

Principios: reglas abstractas de diseo, con alta generalidad y baja autoridad.

Estndares: reglas especificas de diseo, con alta autoridad y aplicacin limitada.

Guas: menor autoridad y aplicacin ms general, pero son directrices para aspectos

concretos.



Principios:

Estn basados en ideas de alto nivel y de aplicacin muy general.

No especifican mtodos para obtener sus objetivos.

Son bastante abstractos y se plasman en reglas de diseo que guan al diseador.



Principios:

Preece (1994)

- Estudiar la poblacin de usuarios

- Reducir la carga cognitiva

- Aplicar tcnicas de ingeniera para resolver la

problemtica del error humano

- Mantener consistencia y claridad



Principios:

Dix (1998)

Facilidad de aprendizaje

Flexibilidad

Robustez



Principios:

IBM (2001) Simplicidad - Apoyo

Familiaridad - Evidencia

Estmulo - Satisfaccin

Disponibilidad - Seguridad

Versatilidad - Personalizacin

Afinidad



Las 8 Reglas de Oro del diseo de interfaces de Ben Shneiderman son una base para el diseo de una buena interaccin:

Buscar la consistencia.

Permitir que los usuarios frecuentes utilicen accesos directos.

Ofrecer retroalimentacin informativa.

Disear acciones secuenciales.

Errores simples

Fcil reversin de las acciones.

Apoyar al usuario con una interfaz amigable.

Reducir la carga de memoria

Algunos ejemplos: Parte 1 Parte 2



Estndares:

Requisitos, reglas o recomendaciones basadas en principios probados en la prctica. Representa un acuerdo de un grupo de profesionales oficialmente autorizados a nivel local, nacional o internacional. Ejemplos: teclado de telfono, teclado QWERTY

Los estndares de la interfaz pretenden conseguir un software mas fcil y seguro estableciendo y unos requisitos mnimos de fabricacin, eliminando inconsistencias y variaciones innecesarias en las interfaces.



Estndares: de Iure

Son generados por comits con status legal y tienen el apoyo de un gobierno o institucin para

producir esos estndares.


Estndares: de Iure - ISO/IEC 9126: Evaluacin de productos software:

caractersticas de calidad y directrices para su uso

- ISO 9241: requisitos ergonmicos para trabajar con terminales de presentacin visual (VDT)

- ISO/IEC 10741: interaccin de dilogos

- ISO/IEC 11581: smbolos y funciones de los iconos

- ISO 11064: diseo ergonmico de centros de control

- ISO 13406: requisitos ergonmicos para trabajar con presentaciones visuales basadas en paneles planos

- ISO 9241-210 (antes ISO 13407): procesos de diseo centrados en la persona para sistemas interactivos



Estndares: de facto

Son estndares que nacen a partir de productos de la industria que tienen un gran xito en el mercado o

desarrollos hechos por grupos de investigacin en la

Universidad que tienen una gran difusin.

Son aceptados como tales por su uso generalizado

Su definicin se encuentra en manuales, libros o artculos



Guas de estilo

La mayora de los sistemas de GUI han publicado directrices que indican como asociar esos principios abstractos a entornos de programacin concretos, son las guas de estilo.

Proporcionan un marco que puede guiar a los diseadores a tomar decisiones correctas en sus diseos (look and feel).

Comerciales, corporativas, guas de estilo para la web



Las guas de estilo suelen producirlas fabricantes de software y hardware y contienen directrices que se concretan a muy bajo nivel.


Referencias - Diseo

Apuntes de la asignatura de IPO (referencias incluidas).

Interaction Design: Beyond Human-Computer Interaction, Captulo 11. H. Sharp, Y. Rogers & J.

Preece. Wiley, 2011.

Human-Computer Interaction, Captulo 7. A. Dix, J. Finley, G. Abowd & R. Beale. Prentice Hall, 2004

3.DCU Diseño Web Parte Repaso 2014 15

Documents

Transcript of 3.DCU Diseño Web Parte Repaso 2014 15