Diseño de Interfaces: Estándares y guías de estilo (página 2)

PrincipiosIBM (2001) Simplicidad Apoyo Familiaridad Evidencia Estímulo Satisfacción Disponibilidad Seguridad Versatilidad Personalización Afinidad Hacer las acciones previsibles y reversibles. Las acciones de los usuarios deberían producir los resultados que ellos esperan

PrincipiosIBM (2001) Simplicidad Apoyo Familiaridad Evidencia Estímulo Satisfacción Disponibilidad Seguridad Versatilidad Personalización Afinidad Crear una sensación de progreso y logro en el usuario

PrincipiosIBM (2001) Simplicidad Apoyo Familiaridad Evidencia Estímulo Satisfacción Disponibilidad Seguridad Versatilidad Personalización Afinidad Hacer todos los objetos disponibles de forma que el usuario pueda usar todos sus objetos en cualquier secuencia y en cualquier momento

PrincipiosIBM (2001) Simplicidad Apoyo Familiaridad Evidencia Estímulo Satisfacción Disponibilidad Seguridad Versatilidad Personalización Afinidad Evitarle errores al usuario proporcionándole diferentes tipos de ayuda bien de forma automática o bien a petición del propio usuario

PrincipiosIBM (2001) Simplicidad Apoyo Familiaridad Evidencia Estímulo Satisfacción Disponibilidad Seguridad Versatilidad Personalización Afinidad Soportar diversas técnicas de interacción, de forma que el usuario pueda seleccionar el método de interacción más apropiado para su situación

PrincipiosIBM (2001) Simplicidad Apoyo Familiaridad Evidencia Estímulo Satisfacción Disponibilidad Seguridad Versatilidad Personalización Afinidad Permitir a los usuarios adaptar la interfaz a sus necesidades

PrincipiosIBM (2001) Simplicidad Apoyo Familiaridad Evidencia Estímulo Satisfacción Disponibilidad Seguridad Versatilidad Personalización Afinidad Permitir con un buen diseño visual que los objetos sean afines a otros de la realidad cotidiana

Principios y directrices Directrices Ejemplo relacionado con el principio de asistencia: Proporcionar ayuda contextual para cada opción y objeto sobre el que pueda posicionarse el cursor Las directrices son objetivos mas específicos que los especialistas en IPO concretan a partir de los principios para usuarios, entornos y tecnologías diferentes Permiten asegurar consistencia en un sistema o familia Fundamental para las empresas de desarrollo de software Las directrices recomiendan acciones basándose en un conjunto de principios de diseño. Son más específicas y requieren menos experiencia para entenderlas e interpretarlas que los principios

Contenidos Introducción Principios y directrices Estándares De Iure De Facto Guías de estilo Comerciales Corporativas Guías de estilo para la web Consideraciones

Estándares Los estándares pueden ser: Locales Nacionales Internacionales 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, nacional o internacional

Estándares El objetivo de los estándares es hacer las cosas más fáciles, definiendo características de objetos y sistemas que se utilizan cotidianamente Ejemplos: teclado de teléfono, teclado QWERTY Toda la industria funciona con estándares Ejemplo: Construcción También la industria informática Estándares de pantallas, teclados, conectores, incluso mobiliario Ejemplo: ‘la inclinación del teclado debe estar entre 0 y 25 grados’

EstándaresEstándares de la interfaz Objetivo: conseguir un software más fácil y seguro, estableciendo unos requisitos mínimos de fabricación, eliminando inconsistencias y variaciones innecesarias en las interfaces

EstándaresBeneficios Una terminología común Permite a los diseñadores discutir los mismos conceptos y hacer valoraciones comparativas El mantenimiento y la evolución Todos los programas tienen la misma estructura y el mismo estilo Una identidad común Lo que hace que todos los sistemas sean fáciles de reconocer Reducción en la formación Los conocimientos son más fáciles de transmitir de un sistema a otro Salud y seguridad Si los sistemas han pasado controles de estándares es difícil que tengan comportamientos inesperados

EstándaresClasificación Tipos de estándares Estándares de iure Estándares de facto

EstándaresEstándares de iure Son generados por comités con estatus legal y gozan del apoyo de un gobierno o institución para producir estándares Para hacer un estándar de iure se ha de seguir un proceso complejo: Documento preliminar público Enmiendas Aprobación (tras cierto tiempo, a veces año) Ejemplo: Ansi C

Estándares de iureComités En Informática tienen estatus legal para definir estándares de iure: ISO Asociació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 CEN Comité Europeo para la Estandarización W3C Consorcio para la World Wide Web

EstándaresEstándares de facto Son estándares que nacen a partir de productos de la industria que tienen un gran éxito en el mercado o desarrollos hechos por grupos de investigación en la Universidad que tienen una gran difusión Son aceptados como tales por su uso generalizado Su definición se encuentra en manuales, libros o artículos Ejemplos: Sistema X-Windows Lenguaje C Normas CUA

Estándares de iure en IPO Los estándares de la interfaz son relativamente recientes Algunos de los más importantes son: ISO/IEC 9126: Evaluación de productos software: características de calidad y directrices para su uso ISO 9241: requisitos ergonómicos para trabajar con terminales de presentación visual (VDT) ISO/IEC 10741: interacción de diálogos ISO/IEC 11581: símbolos y funciones de los iconos ISO 11064: diseño ergonómico de centros de control ISO 13406: requisitos ergonómicos para trabajar con presentaciones visuales basadas en paneles planos ISO 13407: procesos de diseño centrados en la persona para sistemas interactivos

Estándares de iure en IPO Algunos aspectos cubiertos por la ISO 9241 (requisitos ergonómicos para trabajar con terminales de presentación visual): Requisitos de la presentación visual Requisitos de teclado Diseño de estaciones de trabajo y requisitos de las posturas Requisitos para la visualización con reflejos Requisitos para colores visualizados Requisitos para dispositivos de entrada no-teclado Principios de diálogos Presentación de información Diálogos de menús Diálogos de manipulación directa Diálogos para completar formularios

Contenidos Introducción Principios y directrices Estándares De Iure De Facto Guías de estilo Comerciales Corporativas Guías de estilo para la web Consideraciones

Guías de estilo Para asegurar la consistencia de las diferentes partes de un sistema o de una familia de sistemas es fundamental para los desarrolladores basar sus diseños en un conjunto de principios y directrices Por este motivo es tan importante para las organizaciones que desarrollan software disponer de una guía que puedan seguir sus desarrolladores Estas guías se denominan guías de estilo y varían mucho en sus objetivos

Guías de estilo Pueden ser de dos tipos: Guías de estilo comerciales Guías de estilo corporativas Ventaja: aseguran una mejor usabilidad mediante la consistencia que imponen En el lenguaje industrial se hace referencia a las guías de estilo como el look and feel

Guías de estiloGuías de estilo comerciales Son producidas por fabricantes de software y hardware, y son en general estándares de facto Apple Motif OS/2 Windows Open Look CDE, Common Desktop Environment Java Swing Contienen directrices que se concretan a muy bajo nivel CUA

Guías de estiloJava Look and Feel Java permite la ejecución de un mismo programa en distintas plataformas utilizando la interfaz gráfica correspondiente, gracias al AWT (Abstract Window Toolkit) Con la aparición del conjunto de componentes Swing, parte de las JFC (Java Foundation Classes), se dispone de una apariencia gráfica propia, denominada Metal Además de Metal existen otras apariencias: Motif look and feel Windows look and feel MacOs look and feel

Guías de estiloCUA Estándar de facto desarrollado por IBM y Microsoft Define los componentes de la interfaz que deben mantenerse entre aplicaciones Objetivos: Usabilidad y consistencia de la aplicación Consistencia entre aplicaciones

Guías de estilo CUAPrincipios básicos de diseño Los usuarios tienen el control del diálogo Los usuarios tienen que desarrollar un modelo conceptual de la interfaz Uso de metáforas Metáfora de la sobremesa: los usuarios ven carpetas y documentos, no programas y archivos. El sistema establece la asociación datos-programas Sistema dirigido por el usuario Consistencia Hacer la interfaz transparente

Guías de estilo CUAModelo gráfico Las aplicaciones comparten la pantalla Cada una tiene asignada una parte o ventana Ventana activa: aquella con la que el usuario interacciona Niveles del modelo gráfico: Presentación Acciones Interacción

Guías de estilo CUAPresentación Representa el aspecto visual de la interfaz Las aplicaciones tienen dos tipos de elementos que hay que presentar: Objetos Cualquier cosa que el usuario pueda manipular Son el centro de atención del usuario Acciones Permiten al usuario crear o manipular objetos Se realizan mediante combinaciones de menús y cajas de diálogo

Guías de estilo CUAAcciones Menús Menús desplegables Menús en cascada (no más de dos niveles)

Guías de estilo CUAAcciones Cajas de diálogo Presentan/recogen información Ventana móvil de tamaño fijo Aparece durante el procesamientode una acción del usuario, cuando serequiere información para completarla Se utiliza una elipsis (…) tras el nombre del botón o elemento de menú que abre la caja No usan menús. Usan botones para llamar a las acciones Botones: confirmar, cancelar, ayuda

Guías de estilo CUAAcciones Tipos de cajas de diálogo No modal Permite a los usuarios continuar con su trabajo sin completar el diálogo Modal Requiere que los usuarios completen la caja de diálogo antes de continuar

Guías de estilo CUAAcciones Caja de mensajes Es un tipo especial de caja de diálogo que se utiliza exclusivamente para mostrar mensajes a los usuarios

Guías de estilo CUAInteracción Es el nivel a través del cual los usuarios interaccionan con los componentes de la interfaz Consta de: Selección de objeto Los usuarios apuntan a un objeto que desean manipular y lo seleccionan de manera visible Ejecución de la acción Se selecciona una opción de menú y si es preciso se completa con una caja de diálogo La ejecución de la acción debe ser visualizada

Guías de estilo CUAInteracción Apuntar y seleccionar Los usuarios interaccionan con los componentes de la interfaz Apuntan a lo que desean manipular y lo seleccionan Se utiliza tanto el teclado como el ratón El teclado y el ratón tienen una indicación visual para indicar al usuario dónde se encuentra

Guías de estilo CUAInteracción Indicación visual Teclado Selección de campos (caja de líneas discontinuas) Entrada de campos (cursor de texto) Ratón Un puntero indica la posición del ratón

Guías de estilo CUAInteracción Énfasis Trata de realzar la importancia de algunos elementos de interacción para que el usuario cuando interacciona pueda saber: Foco de la entrada Opciones disponibles Opciones no disponibles Estado actual de las opciones

Guías de estilo CUAInteracción Tipos de énfasis: Énfasis de cursor Énfasis de selección Énfasis de no disponible Énfasis del estado actual

Guías de estilo CUAInteracción Selección Selección con el ratón Clic, Doble-clic, Mayus+clic, Ctrl+clic, Arrastrar y seleccionar Selección con el teclado Tabulación, flechas, Mayus y Ctrl (selección), Alt (menús)

Guías de estilo CUAInteracción Acciones comunes La consistencia en acciones comunes es importante para reforzar el modelo conceptual del usuario Existen acciones que son comunes a la mayoría de las aplicaciones, y que CUA define: Abrir fichero Imprimir Tipo de letra

Guías de estiloGuías de estilo para la Web Diseñar para la Web es diferente de diseñar interfaces de usuario tradicionales Algunos principios son aplicables pero la Web tiene sus particularidades Una característica importante de la Web es la falta de interfaces de usuario comunes. La prioridad es conseguir una interfaz atractiva, diferente de las otras Para afrontar este problema varias empresas y organismos han publicado sus guías de estilo Web Apple IBM Sun W3C Yale Center for Advanced Instructional Media National Cancer Institute (NIC)

Guías de estilo Guías de estilo corporativas Ayudan a las empresas a dar un mismo estilo a todos sus productos Si una organización desea desarrollar su propio estilo corporativo, primero ha de escoger una guía de estilo comercial Esta guía se aumenta con unas características propias que produzcan una imagen coherente de la organización

Consideraciones Los estándares y guías proporcionan una base sobre la cual realizar el diseño y desarrollo Sin embargo, el uso de guías no garantiza que la interfaz sea usable Es mejor seguir las guías que no hacerlo. Puede que podamos hacer un diseño mejor sin guías, pero son muchas más las ventajas que aportan que las desventajas Es conveniente dar facilidades a los diseñadores y programadores: Proporcionar ejemplos en la documentación Incorporar las guías a las herramientas Dar formación y entrenamiento

Conclusiones Los estándares y las guías de estilo facilitan el diseño de interfaces También facilitan el aprendizaje y reducen los errores al permitir al usuario aprovechar el conocimiento adquirido en otros productos Es imprescindible para un diseñador de IPO conocer los estándares existentes y las guías más adecuadas al entorno en el que va a trabajar