Contenidos 1. Interacción Hombre-Máquina 2. El Factor Humano 3. Diseño Gráfico 4. Estilos de Interacción 5. Metáforas 6. Internacionalización 7. Soporte al Usuario 8. Usabilidad Web 9. 10. Accesibilidad 11. Trabajo cooperativo 12. Evaluación 9. n n n n Introducción Clasificación de las reglas Estándares n n n Clasificación Organismos implicados Ejemplos Guías n n n De estilo Corporativas Ejemplos
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
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 - Generalidad + Guías Estándares - Autoridad + 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)
Estándares (II) El objetivo es hacer las cosas más fáciles definiendo características de objetos y sistemas que se utilizan cotidianamente: Teclado Teléfono Estándares (III) Hardware Suelen reflejar la importancia de la ergonomía en las interfaces de usuario Software Suelen aplicarse a las características básicas de la interfaz usuario. Pretenden eliminar variaciones innecesarias e inconsistencias en la interfaz
Estándares (IV) iure Son 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. facto Nacen 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)...
v ISO Fundada en 1947 y con sede en Ginebra Federació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). 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.
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ón Es el principal proveedor de estándares europeos y especificaciones técnicas.
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: accesibilidad Internacionalización... Disponibilidad totalmente gratuita
Pasos elaboración Estándar ISO Estado 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 por un grupo de trabajo 3 CD Committee Draft. Borrador de comité Borrador completo para votación y comentarios técnicos por cuerpos nacionales CD TR o TS Committee Draft Technical Report/Specification. Borrador de comité de un informe o especificación técnica 4 CDV Committee Draft for Vote. Borrador de comité para votación (IEC) DIS Draft International Standard. Borrador de un estándar internacional Borrador final para votación y comentarios editoriales por cuerpos nacionales FCD Final Committee Draft. Borrador final del comité (JTC1) DTR o DTS Draft Technical Report/Specification. Borrador de una especificación o informe técnico 5 FDIS Final Draft International Standard. Borrador final de un estándar internacional Texto para la publicación por aprobación final 6 ISO International Standard. Estándar internacional Documento publicado ISO TR o TS Technical Report or Specification. Especificación o informe té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
Requerimientos de Visualización (ISO - 9241) Distancia de visión ( >= 400 mm) Ángulo de visión ( 0-60º) Altura de los caracteres Proporción de altura - anchura Espaciado entre caracteres Espaciado entre palabras Espaciado entre líneas Estabilidad 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 Parte 1 Principios para el diseño de centros de control IS Estad o 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
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 interfaz Las guías para los elementos y controles de la interfaz dicen: Cuándo usarlos Cómo presentarlos Técnicas usadas para interaccionar con ellos
Guías de Estilo Comerciales Apple Apple s Inside Macintosh, Vol V,1985 Macintosh Human Interface Guidelines: The Apple Desktop Interf (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, 1992 The Windows Interface Guidelines for Software Design,1995 The Microsoft Windows User Experience, 2000. Hewlett-Packard / OSF (Open Software Foundation) OSF/Motif Sytle Guide,1992 CDE 2.1: Motif and CDE 2.1 Style Guide Sun JavaTM Look and Feel Design Guidelines, 1999
Ejemplos Look and Feel Guidelines The Windows Interface Guidelines 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 interactivos Ambos son diseño de software Algunos principios de diseño tradicionales son directamente aplicables Son necesarias nuevas consideraciones
Guías de Estilo para Web (II) Apple - Apple Web Design Guide Contiene principios de diseño de interfaces de usuario generales Esta 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.
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 Sun Es bastante general y está organizada en categorías: Objetivo Audiencia Enlaces Longitud de la página Gráficos... http://sut1.sut.ac.th/styleguide/printing_version.html. W3C Guías de Estilo para Web (V) 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
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. http://www.w3.org/wai/resources/#gl 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. http://www.w3.org/wai/resources/#gl
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. http://www.w3.org/wai/resources/#gl 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/.
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 suplemento un complemento una contradicción
Guías de Estilo Corporativo (III) Yale Web Style Guide Web Style Guide: Basic Design Principles for Creating Web Sites. Introducción Diseño de Interfaces Diseño del Sitio Diseño de la Página Gráficos en la Web Animación y Mutimedia en Web Apéndices
Yale Web Style Guide Diseño de Interfaces Diseño Básico de Interfaces Diseñ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. Ayudas claras para la navegación Los 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. No páginas muertas Cada página deberá contener al menos un enlace. Yale Web Style Guide Diseño de Interfaces (II) Acceso a la Información Dar a los usuarios acceso directo a la información Ancho de banda e interacción Usuarios no toleran retrasos Simplicidad y Consistencia Proporcionada 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,... Estabilidad de Diseño Asegurándose que los enlaces, sobre todo externos, funcionan perfectamente Realimentación y Diálogo El sitio debe estar preparado para responder a las peticiones y comentarios de los usuarios. Siempre enlaces al webmaster. Diseño para discapacitados
Yale Web Style Guide Diseño de Interfaces (III) Enlaces y Navegación Siempre posibilidad de ir hacia delante y hacia atrás Posibilidad de ir a la página previa y a la siguiente Yale Web Style Guide 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 secuencia Suelen incluirse en barras de herramienta, en la que también se suelen colocar enlaces a la página de inicio y otras páginas relacionadas con la actual.
Yale Web Style Guide Diseño del Sitio (III) Estructura del sitio Yale Web Style Guide Diseño del Sitio (III) Elementos del Sitio I Pagina de Inicio. Muy importante. Entrada al sitio. Dirección que se proporciona Posibilidades 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 enlaces Ofrecer visiones alternativas del sitio Web.
Yale Web Style Guide Diseño del Sitio (III) Elementos del Sitio II Actualización del sitio Poner la etiqueta Nuevo en cada elemento añadido Poner fecha a cada página web y actualizarla en cada modificación En sitios complejos y con muchos niveles: what s new Sección de otros sitios relacionados Bibliografías, indices, apéndices... FAQ Portada Asegurarse que la entrada elegida es la más adecuada para la audiencia Información Yale Web Style Guide Diseño del Sitio (III) 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. Referencia Debe 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. Otras Las preguntas se responden entrando en el sitio. Depende de la expectación del visitante por el sitio.
Bibliografía Human-Computer Interface Design Guidelines C. Brown. Ablex Publishing Corp, Norwood, 1988 Principles and Guidelines in Software User Interface Design D. Mayhew. Prentice-Hall, 1992 Systems Application Architecture/Common User Access. Advanced Interface Design Guide IBM, 1989 The Elements of User Interface Design Theo Mandel. John Wiley & Sons, Inc, 1997 ISO and ANSI Ergonomics Standards for Computer Products. A Guide to Implementation and Compliance W.J. Smith. Prentice-Hall, 1996 Web Style Guide: Basic Design Principles for Creating Web Sites Patrick Lynch. Yale Press, 1999 Java Look and Feel Design Guidelines http://java.sun.com/products/jlf/dg/index.htm