Estndares y guas de estilo

Guas y estndares

Presentacin

Presentamos en este tema el tema de los estndares y las guas de estilo a aplicar en el diseo de sistemas interactivos

Objetivos
Saber y conocer la diferencia entre principios y reglas o directivas Saber que es un estndar y aprender a diferenciarlos Describir los estndares de iure Ver la necesidad y la utilidad de las guas de estilo Conocer y comparar las diferentes guas de estilo

Contenidos
Principios y directivas Estndards
Facto Iure

Guias de estilo
Comerciales Corporativas

Principios
Son objetivos generales que pueden ser tiles para organizar el diseo Sin embargo, no se especifican mtodos para obtener esos objetivos, y est limitado al uso prctico
Minimizar el trabajo del usuario

Estn basados en principios de alto nivel y de una aplicacin muy general

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

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

Principis

Schneiderman (1992)
Consistencia Permite a los usuarios experimentados atajos Dar informacin de realimentacin Haz la gestin de errores sencilla Permite que se puedan deshacer acciones Reduce la carga cognitiva de la memoria a corto termino

Nielsen

10 reglas heursticas
El estado del sistema es siempre visible Se utiliza el lenguaje de los usuarios El usuario tiene control y libertad Hay consistencia y se siguen estndares Existe prevencin de errores Se minimiza la carga de la memoria del usuario Existe flexibilidad y eficiencia de uso Los dilogos son estticos y el diseo minimalista Al utilizar la ayuda, se reconocen, diagnostican, y se recuperan de los errores Existe ayuda y documentacin

Directrices
Cada principio en general es un objetivo, pero no dice como conseguirlo Las directrices son objetivos mas especficos que los especialistas en IPO concretan de los principios para usuarios, entornos y tecnologas diferentes

Directrices

Ejemplos
No pongas botones de cerrar en dilogos modales Doble clic quiere decir clic + accin Pon botones de OK y CANCEL en cualquier caja de dilogo modal Utiliza verbos en la barra de ttulo en cuadros de dilogo de funciones

Directrices Brown

Objetivos

Aprovechar la experiencia prctica Difundir e incorporar experiencia experimental aplicable Incorporar reglas de sentido comn Promover consistencia entre los diseadores 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.

Estndares
Desarrollar estndares para la interfaz es para hacer los desarrollos de software ms fciles y seguros, estableciendo unos requisitos mnimos de fabricacin, eliminando inconsistencias y variaciones innecesarias en las interfases Tipos
Estndar de jure Estndar de facto

Estndares

Beneficios
Una terminologa comn
Permite a los diseadores discutir los mismos conceptos y hacer valoraciones comparativas.

El mantenimiento y la evolucin
Todos los programas tiene la misma estructura y el mismo estilo.

Una identidad comn

Lo que hace que todos los sistemas sean fciles de reconocer.

Reduccin en la formacin
Los conocimientos son mas fciles de transmitir de un sistema a otro

Salud y seguridad
Si los sistemas han pasado controles de estndares es difcil que tengan comportamientos inesperados.

Estndard de jure
Los estndares de iure son generados por un comit con estatus legal y gozan del apoyo de un gobierno o una institucin para producir estndares Para hacer un estndar de iure se ha de iniciar un proceso complejo
Documento preliminar Enmiendas Aprobacin Ejemplo
Ansi C

Estndard de jure

Comites
ISO ANSI

Tienen estatus legal para definir estndares de iure

Asociacin internacional de estndares Instituto Nacional Americano para estndares IEEE Instituto de Ingenieros Elctricos y Electrnicos americano CEN Comit Europeo para la estandarizacin JIS Instituto Japons para estndares W3C World wide web consortium

Estndares de facto
Son estndares que nacen a partir de productos de la industria que tiene un gran xito en el mercado o desarrollos hechos por grupos de investigacin en la Universidad que se divulgan rpidamente Su definicin se encuentra en manuales, libros y artculos Son aceptados como tales por su uso generalizado Ejemplo: Lenguaje C Normas CUA

ISO estndares de iure

ISO 9241 Ergonomic principles for visual display terminals. ISO/IEC 10741 What happens to the cursor control when users interact with text editors. ISO/IEC 11581 Usage and appropriateness of icons in the user interface. ISO 13407 Designing user interfaces with humans in mind. ISO/IEC 14754 Defines the basic gesture commands. ISO 14915 Recommendations for multimedia controls and navigation. ISO/IEC 18019 A standard for the design and preparation of software user documentation.

Estndar de iure

ISO 9241

ISO 9241 Requisitos ergonmicos para el trabajo de oficina con terminales visuales Estndar redactado por ISO/TC 159 (Ergonomics), SC 4 (Ergonomics of human-system interactions), WG 5 (Software ergonomics and human-computer dialogues)

ISO 9241

Part 10: Principios de dilogo

Describe principios ergonmicos generales que son independientes de una tcnica especfica de dilogo, pero que puede ser aplicado como guias cuando se especifica, desarrolla o evala un sistema de dilogo

1996

Principios cubiertos:
Adecuacin de la tarea Autodescripcin Controlabilidad Conformidad con las expectativas del usuario Tolerancia al error Adecuacin a la adaptacin Adecuacin al aprendizaje El estndar no contiene requisitos o recomendaciones ,mas bien discute cada uno de los principios y da ejemplos de cmo se puede aplicar en las interfaces

ISO 9241

1998

Part 11: Gua en la usabildiad

Explica que la usabilidad depende del contexto de uso y que el nivel de usabilidad conseguido depender de las circunstancias especficas en que se usa un producto Explica los beneficios de medir la usabilidad en trminos de cmo se consiguen los objetivos

ISO 9241

Part 12: Presentation of information

Aporta recomendaciones de la presentacin de informacin visual Organizacin de la informacin Uso de tecnicas de codificacinnd satisfaction. Temas:
Ventanas Grupos Listas y tablas Etiquetas y campos Cursores y punteros Codificacin alfanumrica, grfica y codificacin de color

ISO 9241

Parte 15: Dilogos de rdenes

Presenta recomendaciones para dilogos de rdenes para realizar tareas de oficina Los dilogos de rdenes se definen por este estndar 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 Adems, aporta recomendaciones para teclas de funcin y hot que representan comandos

ISO 9241

Part 16: Dilogos de manipulacin directa

1998

En los dilogos de manipulacin directa el usuario acta directamente sobre los objetos apuntndolos, moviendolos o cambiando sus caractersticas fsicas con el uso de un dispositivo de entrada Contiene recomendaciones para el diseo de dichos dilogos Temas
Caractersticas y idoneidad de la manipulacin directa Metforas Apariencia de los objetos Realimentacin Dispositivos de entrada Apuntar y seleccionar Dragging, sizing, scaling, rotating Manipulacin de objetos tipo texto Manipulacion de ventanas

ISO 9241

1998

Part 17: Form-filling dialogues

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

ISO/IEC 11581
Interfaces de usuarios y smbolos Smbolos y funciones de los iconos
Este estndar 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

ISO/IEC 11581
Part Part Part Part Part Part 1: 2: 3: 4: 5: 6: Iconos Iconos Iconos Iconos Iconos Iconos

2000

conceptos generales de objetos de punteros de controsl herramientas de acciones

ISO 11581
Part 1: Iconos: conceptos generales Aporta un marco general para el diseo y desarrollo de iconos y su
aplicacin en las pantallas. Contiene requisitos generals y recomendaciones para iconos y representaciones grficas

Part 2: Object icons

Describe la apariencia y la interaccin del usuario con iconos que representan funciones mediante la asociacin con un objeto y que se puede mover y abrir. Contiene elementos y recomendaciones para 19 iconos de objetos usados comunmente

ISO 11581
Parte 3: Iconos apuntadores
Apariencia e interaccin 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 grficos que proporcionen interaccn de dilogos entre el sistema y el usuario

ISO 11581
Parte 5: Iconos de herramienta
Describe su apariencia e interaccin. Especifica la relacin 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

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

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.

Estndares de facto

Guas de estilo comerciales

Es fundamental para los desarrolladores basar sus diseos 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 gua que puedan seguir sus desarrolladores Estas guas se denominan guas de estilo y varan mucho en sus objetivos.
Macintosh,
OS/2 Windows UNIX Java

Guia de estilo

CUA (Common User Access

Fueron publicadas en 1987 por IBM juntamente con Microsoft fruto de una colaboracin comn Se adopt universalmente por la fuerza de IBM Windows, OS/2 i Motif, son los estndares ms importantes que siguen esta norma

CUA

Aspectos visuales...

...Aspectos visuals

Motif
Motif es un estndar industrial de interfaz grfica de usuario (definido por la especificacin IEEE 1295 ), que se utiliza en ms de 200 plataformas de hardware y software Es la interfaz lider en el sistema operativo UNIX

Motif

CDE

Common desktop environment

CDE
Common Desktop Environment es un entorno comn de software para ordenadores UNIX Desarrollado conjuntamente por IBM, HP, Novell, SCO i SUN, redactado por X/Open, una organizacin para hacer estndares en el mundo UNIX Est basado en estndares de facto en la indstria como X.11, Motif i Tooltalk

Windows'95, 98 NT

MacIntosh
MacInstosh

http://developer.apple.com/techpubs/mac/HIGuidelines/HIGuidelines-2.html

MacIntosh

Gua de estilo

Mens

Finestres

Cajas de dilogo

Cajas de dilogo

Mac

Controles
Son objetos grficos que originan acciones instantneas o resultados audibles cuando el usuario los manipula con el ratn

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.

Mac

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

Layout

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.

OpenLook

Java: look and feel

Look and Feel: la apariencia Y el comportamiento de un cojunto Completo de componentes de la IGU

http://java.sun.com/products/jlf2/guidelines.html

Java Gua de estilo

Flush 3D style

Modelo de color

http://java.sun.com/products/jlf

Textura de drag

Java

Gua de estilo

Espaciado

Estndares

Accesibilidad
Iniciativa de accesibilidad WEB
WAI

Es un estndar de accesibilidad promovido por la World Wide Web Consortium (W3C)

Gua de estilo en la WEB

No hay una gua de estilo propia
Hay mas mfasis en el impacto que en la consistencia

La metfora de la interfase de usuario es la pgina

El usuario interacciona con la pgina y navega de pgina en pgina Las capacidades mas habituales son:
Hypertext URL Ordenes de adelante/atrs Puntos de libro

Guias de estilo corporativas...

Si una organizacin 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

Guas de estilo corporativas

La idea es usar las guas de estilo con caractersticas propias que permitan un estilo propio a la organizacin Hay que ver los elementos que han de ser considerados para tener una imagen coherente

Conclusiones
Es importante destacar que aunque se sigan estrictamente las normas de la gua no hay garanta de que la interfase sea usable Es mejor seguir las guias que no, no seguirlas. Puede que podamos hacer un diseo mejor, pero seguramente los problemas que pueda plantear pueden ser superiores a los problemas que aporta