1 Estándares y guías de estilo
2 Guías y estándares PresentaciónPresentamos en este tema el tema de los estándares y las guías de estilo a aplicar en el diseño de sistemas interactivos
3 Objetivos Saber y conocer la diferencia entre principios y reglas o directivas Saber que es un estándar y aprender a diferenciarlos Describir los estándares de iure Ver la necesidad y la utilidad de las guías de estilo Conocer y comparar las diferentes guías de estilo
4 Contenidos Principios y directivas Estándards Guias de estilo FactoIure Guias de estilo Comerciales Corporativas
5 Principios Son objetivos generales que pueden ser útiles para organizar el diseño Sin embargo, no se especifican métodos para obtener esos objetivos, y está limitado al uso práctico Minimizar el trabajo del usuario Están basados en principios de alto nivel y de una aplicación muy general
6 Estudiar la población de usuarios Reducir la carga cognitiva Principios Preece (1994) Estudiar la población de usuarios Reducir la carga cognitiva Aplicar técnicas de ingeniería para resolver la problemática del error humano Mantener consistencia y claridad
7 Deja el control a los usuarios Minimiza el trabajo de los usuarios Principios Simpson (1985) Define los usuarios Deja el control a los usuarios Minimiza el trabajo de los usuarios Haz un programa sencillo Es preciso ser consistente Son necesarias las realimentaciones No cargues la memoria de trabajo Trata de no hacer un uso abusivo de la memoria a largo plazo
8 Principis Schneiderman (1992)Consistencia Permite a los usuarios experimentados atajos Dar información de realimentación Haz la gestión de errores sencilla Permite que se puedan deshacer acciones Reduce la carga cognitiva de la memoria a corto termino
9 Nielsen 10 reglas heurísticasEl estado del sistema es siempre visible Se utiliza el lenguaje de los usuarios El usuario tiene control y libertad Hay consistencia y se siguen estándares Existe prevención de errores Se minimiza la carga de la memoria del usuario Existe flexibilidad y eficiencia de uso Los diálogos son estéticos y el diseño minimalista Al utilizar la ayuda, se reconocen, diagnostican, y se recuperan de los errores Existe ayuda y documentación
10 Directrices Cada principio en general es un objetivo, pero no dice como conseguirlo Las directrices son objetivos mas específicos que los especialistas en IPO concretan de los principios para usuarios, entornos y tecnologías diferentes
11 No pongas botones de cerrar en diálogos modales Directrices Ejemplos No pongas botones de cerrar en diálogos modales Doble clic quiere decir clic + acción Pon botones de OK y CANCEL en cualquier caja de diálogo modal Utiliza verbos en la barra de título en cuadros de diálogo de funciones
12 Directrices – Brown ObjetivosAprovechar la experiencia práctica Difundir e incorporar experiencia experimental aplicable Incorporar reglas de sentido común Promover consistencia entre los diseñadores responsables de partes diferentes de la interfaz Las directrices a veces pueden provocar conflictos, y por tanto siempre es importante aplicar test de usabilidad para tratar de resolverlos.
13 Estándares Desarrollar estándares para la interfaz es para hacer los desarrollos de software más fáciles y seguros, estableciendo unos requisitos mínimos de fabricación, eliminando inconsistencias y variaciones innecesarias en las interfases Tipos Estándar de jure Estándar de facto
14 Estándares BeneficiosUna 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 tiene 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 mas 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.
15 Estándard de jure Los estándares de iure son generados por un comité con estatus legal y gozan del apoyo de un gobierno o una institución para producir estándares Para hacer un estándar de iure se ha de iniciar un proceso complejo Documento preliminar Enmiendas Aprobación Ejemplo Ansi C
16 Estándard de jure ComitesTienen estatus legal para definir estándares de iure ISO Asociación internacional de estándares ANSI Instituto Nacional Americano para estándares IEEE Instituto de Ingenieros Eléctricos y Electrónicos americano CEN Comité Europeo para la estandarización JIS Instituto Japonés para estándares W3C World wide web consortium
17 Estándares de facto Son estándares que nacen a partir de productos de la industria que tiene un gran éxito en el mercado o desarrollos hechos por grupos de investigación en la Universidad que se divulgan rápidamente Su definición se encuentra en manuales, libros y artículos Son aceptados como tales por su uso generalizado Ejemplo: Lenguaje C Normas CUA
18 ISO estándares de iure ISO Ergonomic principles for visual display terminals. ISO/IEC What happens to the cursor control when users interact with text editors. ISO/IEC Usage and appropriateness of icons in the user interface. ISO Designing user interfaces with humans in mind. ISO/IEC Defines the basic gesture commands. ISO Recommendations for multimedia controls and navigation. ISO/IEC A standard for the design and preparation of software user documentation.
19 Estándar redactado por Estándar de iure ISO 9241 ISO 9241 Requisitos ergonómicos para el trabajo de oficina con terminales visuales Estándar redactado por ISO/TC 159 (Ergonomics), SC 4 (Ergonomics of human-system interactions), WG 5 (Software ergonomics and human-computer dialogues)
20 ISO 9241 Part 10: Principios de diálogo1996 Describe principios ergonómicos generales que son independientes de una técnica específica de diálogo, pero que puede ser aplicado como guias cuando se especifica, desarrolla o evalúa un sistema de diálogo Principios cubiertos: Adecuación de la tarea Autodescripción Controlabilidad Conformidad con las expectativas del usuario Tolerancia al error Adecuación a la adaptación Adecuación al aprendizaje El estándar no contiene requisitos o recomendaciones ,mas bien discute cada uno de los principios y da ejemplos de cómo se puede aplicar en las interfaces
21 ISO 9241 Part 11: Guía en la usabildiad1998 ISO 9241 Part 11: Guía en la usabildiad Explica que la usabilidad depende del contexto de uso y que el nivel de usabilidad conseguido dependerá de las circunstancias específicas en que se usa un producto Explica los beneficios de medir la usabilidad en términos de cómo se consiguen los objetivos
22 ISO 9241 Part 12: Presentation of informationAporta recomendaciones de la presentación de información visual Organización de la información Uso de tecnicas de codificaciónnd satisfaction. Temas: Ventanas Grupos Listas y tablas Etiquetas y campos Cursores y punteros Codificación alfanumérica, gráfica y codificación de color
23 ISO 9241 Parte 15: Diálogos de órdenesPresenta recomendaciones para diálogos de órdenes para realizar tareas de oficina Los diálogos de órdenes se definen por este estándar como secuencias de instrucciones aportadas por el usuario al sistema que, cuando se procesan, resulta en acciones del sistema asociadas El usuario introduce frases de órdenes completas o abreviadas en el orden requerido por la sintaxis del lenguaje de comandos Además, aporta recomendaciones para teclas de función y hot que representan comandos
24 ISO 9241 Part 16: Diálogos de manipulación directa1998 ISO 9241 Part 16: Diálogos de manipulación directa En los diálogos de manipulación directa el usuario actúa directamente sobre los objetos apuntándolos, moviendolos o cambiando sus características físicas con el uso de un dispositivo de entrada Contiene recomendaciones para el diseño de dichos diálogos Temas Características y idoneidad de la manipulación directa Metáforas Apariencia de los objetos Realimentación Dispositivos de entrada Apuntar y seleccionar Dragging, sizing, scaling, rotating Manipulación de objetos tipo texto Manipulacion de ventanas
25 ISO 9241 Part 17: Form-filling dialogues1998 Conditional recommendations on dialogue design, and input/output design for computer dialogues in which form filling and dialogue boxes are used to accomplish typical office tasks. Form filling as defined by this part are dialogues in which the user fills in, selects entries for, or modifies labelled fields on a form or dialogue box presented by the system Topics included in this standard are: Appropriateness of form filling dialogues Form filling structures Layout Field, label lengths, and alignments Input considerations Alphanumeric text entry Choice entries Menus and buttons Controls Feedback Navigation
26 ISO/IEC 11581 Interfaces de usuarios y símbolosSímbolos y funciones de los iconos Este estándar internacional tiene seis partes, que se aplican a los iconos que se visualizan en las pantallas del ordenador. Estos iconos representan objetos de datos u funciones del sistema con los que los usuarios interaccionan
27 ISO/IEC 11581 Part 1: Iconos – conceptos generales2000 Part 1: Iconos – conceptos generales Part 2: Iconos de objetos Part 3: Iconos de punteros Part 4: Iconos de controsl Part 5: Iconos herramientas Part 6: Iconos de acciones
28 ISO 11581 Part 1: Iconos: conceptos generalesAporta un marco general para el diseño y desarrollo de iconos y su aplicación en las pantallas. Contiene requisitos generals y recomendaciones para iconos y representaciones gráficas Part 2: Object icons Describe la apariencia y la interacción del usuario con iconos que representan funciones mediante la asociación con un objeto y que se puede mover y abrir. Contiene elementos y recomendaciones para 19 iconos de objetos usados comunmente
29 ISO 11581 Parte 3: Iconos apuntadores Parte 4: Iconos de controlApariencia e interacción de iconos asignados a dispositivos de entrada y que el usuario manipula para interaccionar con otros elementos de la pantalla. 8 iconos apuntadores comunes Parte 4: Iconos de control Aportan control de tareas al usuario. Se pueden usar para operar con ventanas, listas, y otros elementos gráficos que proporcionen interaccón de diálogos entre el sistema y el usuario
30 ISO 11581 Parte 5: Iconos de herramienta Parte 6: Iconos de accionesDescribe su apariencia e interacción. Especifica la relación entre iconos de herramienta y de puntero. Contiene requisitos y recomendaciones para 20 iconos de herramienta comunes Parte 6: Iconos de acciones Iconos de acciones o barra de herramientas. Representan acciones asociados con objetos. 23 iconos mas frecuentes
31 ISO/IEC 14754 Pen-based interfaces - Common Gestures for text editing with pen-based systems This is a one-part standard that defines a set of basic gesture commands and feedback for pen interfaces. The standard does not define the actions necessary for the input of text. The gestures are divided into three subsets: Required gesture commands: Select, Delete, Insert space, and Split line
32 ISO/IEC 14754 Required gesture commands for conditional functions, depending on the availability of the clipboard function: Move, Copy, Cut, and Paste Conditionally required gesture commands, depending on product implementation: Scroll and Undo This international standard was published in 1999.
33 Estándares de facto Guías de estilo comercialesEs fundamental para los desarrolladores basar sus diseños en un conjunto de principios y directrices para tener consistencia 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. Macintosh, OS/2 Windows UNIX Java
34 Guia de estilo CUA (Common User AccessFueron publicadas en 1987 por IBM juntamente con Microsoft fruto de una colaboración común Se adoptó universalmente por la fuerza de IBM Windows, OS/2 i Motif, son los estándares más importantes que siguen esta norma
35 CUA
36 Aspectos visuales...
37 ...Aspectos visuals
38 Motif Motif® es un estándar industrial de interfaz gráfica de usuario (definido por la especificación IEEE 1295 ), que se utiliza en más de 200 plataformas de hardware y software Es la interfaz lider en el sistema operativo UNIX
39 Motif Motif és un entorn de finestres del sistema operatiu Unix basat en X-Windows. Va ésser desenvolupat per l'Open Software Foundation, un consorci d'empreses d'informàtica entre les quals es trobaven Hewlett-Packard i Microsoft. Microsoft va incorporar com a guia d'estil de la interfície les normes CUA, la mateixa de Windows i OS/2, tot i donant-li un look and feel lleugerament diferent. És important, per tant, tenir en compte el fet que UNIX (Motif), Windows i OS/2 parteixen de la mateixa guia original, les normes CUA, la qual cosa els dona un interès especial, pel fet de que assegura una consistència entre totes les aplicacions dissenyades per aquests entorns, que constitueixen el 90% dels sistemes informàtics existents. Tot i que aquesta uniformitat semblava molt útil, la ruptura entre IBM i Microsoft va implicar que posteriorment cadascú publiqués les seves guies per separat. Actualment l'aparició de Windows'95 que té una interfície notablement diferents de Windows implica una nova dinàmica en quant la constitucíó d'un nou estandard que dependrà de l'èxit d'aquest nou sistema.
40 CDE Common desktop environment
41 CDE Common Desktop Environment es un entorno común de software para ordenadores UNIX Desarrollado conjuntamente por IBM, HP, Novell, SCO i SUN, redactado por X/Open, una organización para hacer estándares en el mundo UNIX Está basado en estándares de facto en la indústria como X.11, Motif i Tooltalk
42 Windows'95, 98 NT
43 MacIntosh MacInstosh
44 MacIntosh Guía de estiloMenús Finestres
45 Cajas de diálogo Cajas de diálogo
46 Mac Controles Son objetos gráficos que originan acciones instantáneas o resultados audibles cuando el usuario los manipula con el ratón Icons are graphic representations of objects such as documents, storage media, folders, applications, and the Trash. Icons look like their real-world counterparts whenever possible.
47 Allow 16 pixels between groups of controlsMac Distancias 4 pixels between clickable items. If possible, include 6 pixels between items to provide sufficient space for focus rings Allow 16 pixels between groups of controls
48 Layout
49 Iconos Icons are graphic representations of objects such as documents, storage media, folders, applications, and the Trash. Icons look like their real-world counterparts whenever possible.
50 OpenLook És una arquitectura d'interfície definida per una especificació i una guia d'estil que esta descrita en el llibre OPEN LOOK Graphical User Interface Specification. L'arquitectura va esser desenvolupada per AT&T, Sun i d'altres. Una de les implementacions més importants d'Open Look es la feta per Sun en el seu sistema Open Windows.
51 Java: look and feel Look and Feel: la aparienciaY el comportamiento de un cojunto Completo de componentes de la IGU
52 Java Guía de estilo Flush 3D style Modelo de color Textura de drag
53 Java Guía de estilo
54 Espaciado
55 Estándares AccesibilidadIniciativa de accesibilidad WEB WAI Es un estándar de accesibilidad promovido por la World Wide Web Consortium (W3C)
56 Guía de estilo en la WEB No hay una guía de estilo propiaHay mas émfasis en el impacto que en la consistencia La metáfora de la interfase de usuario es la página El usuario interacciona con la página y navega de página en página Las capacidades mas habituales son: Hypertext URL Ordenes de adelante/atrás Puntos de libro
57 Guias de estilo corporativas...Si una organización desea desarrollar su propio estilo corporativo, lo primero es escoger una guia de estilo comercial Lo primero a considerar es que es un estilo y que elementos han de ser considerados para tener una imagen coherente
58 Guías de estilo corporativasLa idea es usar las guías de estilo con características propias que permitan un estilo propio a la organización Hay que ver los elementos que han de ser considerados para tener una imagen coherente
59 Conclusiones Es importante destacar que aunque se sigan estrictamente las normas de la guía no hay garantía de que la interfase sea usable Es mejor seguir las guias que no, no seguirlas. Puede que podamos hacer un diseño mejor, pero seguramente los problemas que pueda plantear pueden ser superiores a los problemas que aporta