9Est.ndares y Gu.as - Departamento de...

1

Martínez & Cueva Interacción Persona Ordenador

Contenidos1. Interacción Hombre-Máquina2. El Factor Humano3. Diseño Gráfico4. Estilos de Interacción5. Metáforas6. Internacionalización7. Soporte al Usuario8. Usabilidad Web9. Guías y Estándares

10. Accesibilidad 11. Trabajo cooperativo 12. Evaluación


9.Guías y Estándaresn Introducción

n Clasificación de las reglas

n Estándaresn Clasificación

n Organismos implicados

n Ejemplos

n Guíasn De estilo

n Corporativas

n Ejemplos

Guías y Estándares

2


Introducción

Se necesita proporcionar diseñadores con la capacidad para determinar las consecuencias de sus decisiones de diseño.

Para ello existen:Principios, basadas en ideas de alto nivel y de aplicación muy general. Son bastante abstractos. Ej. Principios de Mandel

Reglas, son más específicas que los principios y requieren menos experiencia para entenderlas e interpretarlas.



Clasificación de las Reglas

Basándose en la Autoridad: Indica si la regla debe ser seguida o no en diseño, o bien si es sólo sugerida

Basándose en la Generalidad : Indica si la regla puede ser aplicada a muchas decisiones de diseño o bien tiene una aplicación limitada


3


Clases de Reglas

Estándares : Altos en Autoridad y Limitados en Aplicación

Guías: Bajos en Autoridad y más Generales en Aplicación

- Autoridad +

-

G

ener

a lid

ad

+

Estándares

Guías



Estándares

Un estándar es un requisito, regla o recomendación basada en principios probados y en la práctica.

Representa un acuerdo de un grupo de profesionales oficialmente autorizados a nivel

Local(aceptado desde una industria, organización profesional o entidad empresarial)

Nacional (aceptado por una amplia variedad de organizaciones dentro de una nación)

Internacional (consenso entre organizaciones de estándares a nivel mundial)


4


Estándares (II)

El objetivo es hacer las cosas más fáciles definiendo características de objetos y sistemas que se utilizan cotidianamente:

TecladoTeléfono



Estándares (III)

HardwareSuelen reflejar la importancia de la ergonomía en las interfaces de usuario

SoftwareSuelen aplicarse a las características básicas de la interfaz usuario. Pretenden eliminar variaciones innecesarias e inconsistencias en la interfaz


5


Estándares (IV)

iureSon generados por un comité con ‘estatus‘ legal y están avalados por el apoyo de un gobierno o institución para producir estándares. Su elaboración requiere de un proceso complejo.

factoNacen a partir de productos de la industria que tienen un gran éxito en el mercado, o bien a partir de desarrollos hechos por grupos de investigación de universidades y que tienen gran difusión.



Estándares (V)

Comités implicados en la creación de estándares:

ISO (Organización Internacional para Estándares)IEC (Comisión Electrotécnica Internacional)ANSI (Instituto Nacional Americano para Estándares)IEEE (Instituto de Ingenieros Eléctricos y Electrónicos Americano. Asociación para Estándares).CEN (Comité Europeo para la Estándarización)W3C (Consorcio para el World Wide Web)...


6


ISO

Fundada en 1947 y con sede en GinebraFederación mundial de cuerpos de estándares nacionales de más de 130 países.Abarca casi todos los campos excepto básicamente la ingeniería eléctrica (responsabilidad del IEC, Comisión Electrotécnica Internacional).La coordinación entre ISO e IEC es responsabilidad del Comité Técnico de Conexión (JTC).

Guías y Estándaresv


ANSI

Instituto Nacional Americano para Estándares creado en 1918.Instituto de carácter privado, sin ánimo de lucro, dedicado a la representación de los intereses de casi 1000 compañías, organizaciones y agencias del gobierno. Su principal misión es ampliar la competitividad de las empresas de los EEUU a través de la generación de estándares.


7


IEEE

Instituto de Ingenieros Eléctricos y Electrónicos Americano. Asociación para Estándares.Su principal misión es desarrollar y publicar estándares generalmente aceptados, que promoverán la teoría y práctica de la ingeniería eléctrica, electrónica e informática, así como el resto de ramas de la ingeniería y artes o ciencias relacionadas.



CEN

Comité europeo para la estandarizaciónEs el principal proveedor de estándares europeosy especificaciones técnicas.


8


W3C

Consorcio para el World Wide Web creado en 1994 por Tim Berners-Lee en el MIT, con la colaboración del Instituto Nacional de Investigación en Informática y Automática (INRIA) y la Universidad de Keio (Japón).

Su objetivo es llevar el World Wide Web a su pleno potencial, desarrollando protocolos comunes que promueven su evolución y aseguran su interoperabilidad.

Está constituido por más de 500 organizaciones en todo el mundo.



W3C (II)

Proporciona ‘recomendaciones’ creadas por grupos de trabajo en áreas relacionadas con las interfaces de usuario:

accesibilidadInternacionalización...

Disponibilidad totalmente gratuita


9


Pasos elaboración Estándar ISOEstado Tipo Documento Descripción

1 AWI Approved Work Item. Elemento de trabajo aprobado Previo a un borrador de trabajo

2 WD Working Draft. Borrador de trabajo Borrador preliminar para su debate porun grupo de trabajo

3CD Committee Draft. Borrador de comité Borrador completo para votación y

comentarios técnicos por cuerposnacionales

CD TR o TS Committee Draft Technical Report/Specification. Borradorde comité de un informe o especificación técnica

4

CDV Committee Draft for Vote. Borrador de comité paravotación (IEC)

Borrador final para votación y comentarios editoriales por cuerposnacionales

DIS Draft International Standard. Borrador de un estándarinternacional

FCD Final Committee Draft. Borrador final del comité (JTC1)

DTR o DTS Draft Technical Report/Specification. Borrador de unaespecificación o informe técnico

5FDIS Final Draft International Standard. Borrador final de un

estándar internacionalTexto para la publicación por aprobaciónfinal

6ISO International Standard. Estándar internacional Documento publicado

ISO TR o TS Technical Report or Specification. Especificación o informetécnico



Estándares ISO 9241:Requerimientos ergonómicos para trabajo de oficina con VDT

ISO 9241 Requisitos ergonómicos para trabajar con terminales de presentación visual (VDTs)

Estado

Parte 1 Introducción general IS

Parte 2 Orientación sobre los requisitos de las tareas IS

Parte 3 Requisitos de la presentación visual IS

Parte 4 Requisitos de teclado IS

Parte 5 Diseño de estaciones de trabajo y requisitos de las posturas IS

Parte 6 Orientación sobre el entorno de trabajo IS

Parte 7 Requisitos para la visualización con reflejos IS

Parte 8 Requisitos para colores visualizados IS

Parte 9 Requisitos para dispositivos de entrada no-teclado IS

Parte 10 Principios de diálogos IS

Parte 11 Orientación sobre usabilidad IS

Parte 12 Presentación de información IS

Parte 13 Orientación del usuario IS

Parte 14 Diálogos de menús IS

Parte 15 Diálogos de comandos IS

Parte 16 Diálogos de manipulación directa IS

Parte 17 Diálogos para completar formularios IS


10


Requerimientos de Visualización(ISO - 9241)

Distancia de visión ( >= 400 mm)Ángulo de visión ( 0- 60º)Altura de los caracteresProporción de altura - anchuraEspaciado entre caracteresEspaciado entre palabrasEspaciado entre líneasEstabilidad de la imagen…



Estándares ISO 11064: Diseño ergonómico de centros de control

Contiene principios ergonómicos, recomendaciones y directrices para el diseño de los centros de control.

ISO 11064 Diseño ergonómico de centros de control

Estado

Parte 1 Principios para el diseño de centros de control IS

Parte 2 Principios para la organización del control IS

Parte 3 Disposición del sitio de control IS

Parte 4 Disposición y dimensiones de las estaciones de trabajo CD

Parte 5 Interfaces persona – sistema WD

Parte 6 Requisitos del entorno para los sitios de control CD

Parte 7 Principios para la evaluación de los centros de control WD

Parte 8 Requisitos ergonómicos para aplicaciones específicas WD


11


Estándares ISO/IEC 14598:Evaluación de Productos Software

Comprende seis partes que especifican el proceso a seguir para evaluar un producto software.

ISO/IEC 14598 Evaluación de productos software

Estado

Parte 1 Visión general IS

Parte 2 Planificación y gestión IS

Parte 3 Proceso para los desarrolladores IS

Parte 4 Proceso para los adquirientes IS

Parte 5 Proceso para los evaluadores IS

Parte 6 Documentación de los módulos de evaluación IS



Guías

Definen la presentación, comportamiento e interacción estándar para los elementos y controles de la interfazLas guías para los elementos y controles de la interfaz dicen:

Cuándo usarlosCómo presentarlosTécnicas usadas para interaccionar con ellos


12


Guías de Estilo Comerciales Apple

Apple’s Inside Macintosh, Vol V ,1985Macintosh Human Interface Guidelines: The Apple DesktopInterf (1992)Electronic Guide to Macintosh Human Interface Design.Mac OS 8 Human Interface Guidelines.

IBM Common User Access (1987)Advanced Interface Design Guide (1989)Object-Oriented Interface Design: IBM Common User Access Guidelines (1992).



Guías de Estilo Comerciales (II)Microsoft

The Windows Interface:An application design guide, 1992The Windows Interface Guidelines for Software Design,1995The Microsoft Windows User Experience , 2000.

Hewlett-Packard / OSF (Open Software Foundation)

OSF/Motif Sytle Guide,1992CDE 2.1: Motif and CDE 2.1 Style Guide

SunJavaTM Look and Feel Design Guidelines, 1999


13


Look and Feel Guidelines

The Windows Interface Guidelines


Ejemplos


Guías de Estilo para Web Diseñar para Web es distinto que diseñar interfaces de usuarios para software tradicional, aunque también hay similitudes:

Ambos son sistemas interactivosAmbos son diseño de software


Algunos principios de diseño tradicionales son directamente aplicablesSon necesarias nuevas consideraciones

14


Guías de Estilo para Web (II)

Apple - “Apple Web Design Guide”Contiene principios de diseño de interfaces de usuario generalesEsta información ha sido generada entre otras cosas a partir de la guía Macintosh Human Interface Guidelines


http://www.geo.tu-freiberg.de/docs/apple/web_design/intro.html.


Guías de Estilo para Web (III)IBM - “Web Design Guidelines (Web Easy of Use )”

Guía de diseño de nivel medio. Abarca desde principios abstractos hasta convenciones.Está disponible en el sitio web: Easy of Use de IBM. Esta organizada de acuerdo al proceso de desarrollar sitios Web:

Planificación,

Diseño

Producción y Mantenimiento.

Ofrece una apartado especial para comercio electrónico.


http://www-3.ibm.com/ibm/easy/eou_ext.nsf/publish/572.

15


Guías de Estilo para Web (IV) Sun- “Sun Guide to Web Style”

Las directrices aquí presentadas representan las opiniones y preferencias de un grupo de gente especializada en el tema dentro de SunEs bastante general y está organizada en categorías:

Objetivo

Audiencia

EnlacesLongitud de la página

Gráficos

...


http://sut1.sut.ac.th/StyleGuide/Printing_Version.html.


Guías de Estilo para Web (V) W3C

Uno de sus dominios de actuación es la accesibilidad Web y por ello alberga la Iniciativa de Accesibilidad Web (Web Accesibility Initiative, WAI)WAI propone tres guías diferentes para tratar de garantizar un sitio web accesible

Web Content Accesibility Guidelines (1999)

Authoring Tool Accesibility Guidelines (2000)

User Agent Accesibility Guidelines


http://www.w3.org/WAI/Resources/#gl

16


Guías de Estilo para Web (VI) W3C- “Web Content Accesibility Guidelines (WCAG)”

Contiene principios de diseño para hacer sitios web accesibles.

La versión 1.0 ya es una recomendación desde 1999 y existe una versión 2.0 como borrador de trabajo desde Agosto de 2001.

Estudian escenarios corrientes que pueden ocasionar problemas para usuarios discapacitados

Ej. como hacer imágenes accesibles ya que algunos usuarios pueden no ser capaces de ver las imágenes o pueden emplear browsers basados en texto que no soportan imágenes.




Guías de Estilo para Web (VII) W3C- “Authoring Tool Accesibility Guidelines (ATAG)”

La versión 1.0 (febrero del 2000) ya es reconocida como recomendación.

Su objetivo es asistir a los constructores en el diseño de herramientas autorizadas (software necesario para crear sitios web: editores, procesadores,...) de forma que:

La herramientas autorizadas sean accesibles para los autores, independiente de su discapacidad

Produzcan un contenido accesible por defecto.



17


Guías de Estilo para Web (VIII) W3C- “User Agent Accesibility Guidelines (UAAG)”

La versión 1.0 está como recomendación candidata.

Explica como la navegación con teclado, las opciones de configuración, la documentación, la comunicación con software especializado como por ejemplo los sintetizadores de voz, y otras características de las interfaces de usuario, benefician a la gente con discapacidades visuales, auditivas, físicas, cognitivas y neurológicas.




Guías de Estilo para Web(IX) Yale Center for Advanced Instructional Media

Web Style Guide: Basic Desig Principles for Creating Web Sites , 2001.

Guía de Estilo que describe los principios de diseño empleados para crear páginas web dentro del sitio web del C/AIM.

Ha sido recientemente pubicada en un libro y está accesible en la Web.

Es una de las más reconocidas y cubre todos los elementos básicos que se ven implicados en la creación de un sitio web centrándose en la interfaz y en los principios de diseño gráfico.

Ejemplo de su contenido


http://info.med.yale.edu/caim/manual/.

18


Guías de Estilo Corporativo

Pretenden mantener y reforzar la identidad corporativa, es decir, el uso de colores, gráficos e iconos que presenten una imagen visual consistente del logotipo de la compañía a través de los interfaces de los productos



Guías de Estilo Corporativo (II)

Una posibilidad para la creación de una guía de estilo corporativa es partir de una guía de diseño y añadirle elementos siempre que supongan

un suplementoun complementouna contradicción


19


Guías de Estilo Corporativo (III)



Yale Web Style Guide

Web Style Guide: Basic Design Principles for Creating Web Sites.

IntroducciónDiseño de InterfacesDiseño del SitioDiseño de la PáginaGráficos en la WebAnimación y Mutimedia en WebApéndices

20



Diseño de Interfaces

Ayudas claras para la navegaciónLos usuarios deben poder volver fácilmente a la página de inicio y a otros puntos de navegación considerados principales. Estos enlaces básicos deben estar presentes en cada página del sitio. A menudo son botones gráficos en una barra que además proporciona una identidad gráfica consistente a cada página del sitio.

Diseño Básico de InterfacesDiseño centrado en el usuario

La audiencia fundamental. Crear escenarios con diferentes tipos de usuarios que buscan información en el sitio.Testear y diseñar realimentándose con la información que da el usuario.

No páginas muertasCada página deberá contener al menos un enlace.


Acceso a la InformaciónDar a los usuarios acceso directo a la informaciónAncho de banda e interacción

Usuarios no toleran retrasos

Simplicidad y ConsistenciaProporcionada mediante un patrón que implica la misma jerarquía de organización, mismos temas gráficos,...Reforzada con el estilo de títulos,subtítulos, enlaces de navegación,...


Diseño de Interfaces (II)

Estabilidad de DiseñoAsegurándose que los enlaces, sobre todo externos, funcionan perfectamente

Realimentación y DiálogoEl sitio debe estar preparado para responder a las peticiones y comentarios de los usuarios. Siempre enlaces al “webmaster”.

Diseño para discapacitados

21


Enlaces y NavegaciónSiempre posibilidad de ir hacia delante y hacia atrás

Posibilidad de ir a la página previa y a la siguiente


Diseño de Interfaces (III)


Enlaces y Navegación (II)Los enlaces a la página previa y a la siguiente

Enlaces fijos, no relativos No impiden leer la información en cualquier orden, pero si se quiere se puede seguir la secuenciaSuelen incluirse en barras de herramienta, en la que también se suelen colocar enlaces a la página de inicio y otras páginasrelacionadas con la actual.


Diseño de Interfaces (III)

22


Estructura del sitio


Diseño del Sitio (III)


Elementos del Sitio IPagina de Inicio.

Muy importante. Entrada al sitio. Dirección que se proporcionaPosibilidades

Gráfico (carga más lenta generalmente)En la mayoría de las páginas institucionales o de educación hay una imagen aunque sea a modo de banner

Texto (carga más rápida)Ambas

Posibilidad de banner gráfico en la parte superior seguido de texto con enlacesOfrecer visiones alternativas del sitio Web.



23


Elementos del Sitio IIActualización del sitio

Poner la etiqueta “Nuevo” en cada elemento añadidoPoner fecha a cada página web y actualizarla en cada modificaciónEn sitios complejos y con muchos niveles: what’s new

Sección de otros sitios relacionadosBibliografías, indices, apéndices...FAQ




PortadaAsegurarse que la entrada elegida es la más adecuada para la audienciaInformación

Sitios informativos, académicos..Dar una visión general de la metáfora empleada, los objetivos perseguidos por el sitio y proporcionar enlaces a las secciones principales.

ReferenciaDebe parecer más como una tabla de contenidos con enlaces a cada página del sitio. Puede contener gráficos pero su papel es secundario al de los contenidos y enlaces. Función más bien corporativa.

OtrasLas preguntas se responden entrando en el sitio. Depende de la expectación del visitante por el sitio.



24


Bibliografía Human-Computer Interface Design Guidelines

C. Brown. Ablex Publishing Corp, Norwood, 1988

Principles and Guidelines in Software User Interface DesignD. Mayhew. Prentice-Hall, 1992

Systems Application Architecture/Common User Access. AdvancedInterface Design Guide

IBM, 1989

The Elements of User Interface DesignTheo Mandel. John Wiley & Sons, Inc, 1997

ISO and ANSI Ergonomics Standards for Computer Products. A Guideto Implementation and ComplianceW.J. Smith. Prentice-Hall, 1996

Web Style Guide: Basic Design Principles for Creating Web SitesPatrick Lynch. Yale Press, 1999

Java Look and Feel Design Guidelineshttp://java.sun.com/products/jlf/dg/index.htm


9Est.ndares y Gu.as - Departamento de...

Documents

Transcript of 9Est.ndares y Gu.as - Departamento de...