Interaccin persona-ordenador

Estndares y guas de estilo

Objetivos
Ver la necesidad y utilidad de los estndares y las guas de estilo
Conocer la diferencia entre principios y directrices Conocer los diferentes estndares existentes relacionados con IPO Conocer las diferentes guas de estilo existentes

Contenidos
Introduccin Principios y directrices Estndares
De Iure De Facto

Guas de estilo
Comerciales Corporativas Guas de estilo para la web

Consideraciones

Introduccin
Una interfaz bien diseada debe facilitar el trabajo de los usuarios Para ello es preciso entender el modelo mental del usuario y sus habilidades psquicas, fsicas y psicolgicas Los diseadores no son expertos en estos temas y necesitan unos principios generales de diseo consensuados por los expertos Estos principios son conceptos de muy alto nivel que se plasman en unas reglas de diseo que guan al diseador con el fin de conseguir productos usables

Introduccin
La mayora de los sistemas de GUI han publicado directrices que indican cmo asociar estos principios abstractos a entornos de programacin concretos: son las guas de estilo Las guas de estilo proporcionan un marco que puede guiar a los diseadores a tomar decisiones correctas en sus diseos Pueden tener una gran variedad de formas y pueden ser obtenidas en diferentes sitios:
Artculos de revistas acadmicas, profesionales o comerciales Manuales y guas de estilo de empresas de software

Principios y directrices

Principios

Un principio es una sentencia en un sentido muy amplio que normalmente est basada en la investigacin hecha de cmo las personas aprenden y trabajan
Estn basados en ideas de alto nivel y de aplicacin muy general. Por ejemplo:
Asistencia: asistir al usuario en la realizacin de las diferentes tareas

No especifican mtodos para obtener sus objetivos. Son bastante abstractos

Principios

Simpson (1985)
Definir los usuarios Dejar el control a los usuarios Minimizar el trabajo de los usuarios Hacer programas sencillos Mantener la consistencia Proporcionar realimentacin No cargar la memoria de trabajo No abusar de la memoria a largo plazo

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

Mandel (1997)
Colocar a los usuarios en el control de la interfaz Reducir la carga de memoria de los usuarios Hacer la interfaz consistente

Principios

Mandel (1997)
Colocar a los usuarios en el control de la interfaz
Permitir el uso del teclado y el ratn Permitir a los usuarios cambiar la atencin Mostrar mensajes y textos descriptivos Proporcionar acciones inmediatas, reversibles y realimentacin Permitir personalizar la interfaz Permitir manipular los objetos de la interfaz Acomodar a los usuarios con diferentes niveles de habilidad

Reducir la carga de memoria de los usuarios Hacer la interfaz consistente

Principios

Mandel (1997)
Colocar a los usuarios en el control de la interfaz Reducir la carga de memoria de los usuarios
Proporcionar pistas visuales Proporcionar opciones por defecto Proporcionar atajos Emplear metforas del mundo real Emplear la revelacin progresiva para evitar abrumar al usuario Promover la claridad visual

Hacer la interfaz consistente

Principios

Dix (1998)
Facilidad de aprendizaje Flexibilidad Robustez

Principios

IBM (2001)
Simplicidad Apoyo Familiaridad Evidencia Estmulo Satisfaccin Disponibilidad Seguridad Versatilidad Personalizacin Afinidad

Principios

IBM (2001)
Simplicidad Apoyo Familiaridad Evidencia Estmulo Satisfaccin Disponibilidad Seguridad Versatilidad Personalizacin Afinidad
No sacrificar la usabilidad por la funcionalidad del sistema

Principios

IBM (2001)
Simplicidad Apoyo Familiaridad Evidencia Estmulo Satisfaccin Disponibilidad Seguridad Versatilidad Personalizacin Afinidad
Hay que proporcionar el control sobre el sistema al usuario y suministrarle asistencia para facilitar la realizacin de las tareas

Principios

IBM (2001)
Simplicidad Apoyo Familiaridad Evidencia Estmulo Satisfaccin Disponibilidad Seguridad Versatilidad Personalizacin Afinidad
Construir el producto segn el conocimiento previo del usuario, lo que le permitir progresar rpidamente

Principios

IBM (2001)
Simplicidad Apoyo Familiaridad Evidencia Estmulo Satisfaccin Disponibilidad Seguridad Versatilidad Personalizacin Afinidad
Hacer los objetos y sus controles visibles e intuitivos. Emplear siempre que se pueda representaciones del mundo real en la interfaz

Principios

IBM (2001)
Simplicidad Apoyo Familiaridad Evidencia Estmulo Satisfaccin Disponibilidad Seguridad Versatilidad Personalizacin Afinidad
Hacer las acciones previsibles y reversibles. Las acciones de los usuarios deberan producir los resultados que ellos esperan

Principios

IBM (2001)
Simplicidad Apoyo Familiaridad Evidencia Estmulo Satisfaccin Disponibilidad Seguridad Versatilidad Personalizacin Afinidad
Crear una sensacin de progreso y logro en el usuario

Principios

IBM (2001)
Simplicidad Apoyo Familiaridad Evidencia Estmulo Satisfaccin Disponibilidad Seguridad Versatilidad Personalizacin Afinidad
Hacer todos los objetos disponibles de forma que el usuario pueda usar todos sus objetos en cualquier secuencia y en cualquier momento

Principios

IBM (2001)
Simplicidad Apoyo Familiaridad Evidencia Estmulo Satisfaccin Disponibilidad Seguridad Versatilidad Personalizacin Afinidad
Evitarle errores al usuario proporcionndole diferentes tipos de ayuda bien de forma automtica o bien a peticin del propio usuario

Principios

IBM (2001)
Simplicidad Apoyo Familiaridad Evidencia Estmulo Satisfaccin Disponibilidad Seguridad Versatilidad Personalizacin Afinidad
Soportar diversas tcnicas de interaccin, de forma que el usuario pueda seleccionar el mtodo de interaccin ms apropiado para su situacin

Principios

IBM (2001)
Simplicidad Apoyo Familiaridad Evidencia Estmulo Satisfaccin Disponibilidad Seguridad Versatilidad Personalizacin Afinidad
Permitir a los usuarios adaptar la interfaz a sus necesidades

Principios

IBM (2001)
Simplicidad Apoyo Familiaridad Evidencia Estmulo Satisfaccin Disponibilidad Seguridad Versatilidad Personalizacin Afinidad
Permitir con un buen diseo visual que los objetos sean afines a otros de la realidad cotidiana

Principios y directrices

Directrices

Las directrices recomiendan acciones basndose en un conjunto de principios de diseo. Son ms especficas y requieren menos experiencia para entenderlas e interpretarlas que los principios Ejemplo relacionado con el principio de asistencia:
Proporcionar ayuda contextual para cada opcin y objeto sobre el que pueda posicionarse el cursor

Las directrices son objetivos mas especficos que los especialistas en IPO concretan a partir de los principios para usuarios, entornos y tecnologas diferentes Permiten asegurar consistencia en un sistema o familia
Fundamental para las empresas de desarrollo de software

Contenidos
Introduccin Principios y directrices Estndares
De Iure De Facto

Guas de estilo
Comerciales Corporativas Guas de estilo para la web

Consideraciones

Estndares
Un estndar es un requisito, regla o recomendacin basada en principios probados y en la prctica. Representa un acuerdo de un grupo de profesionales oficialmente autorizados a nivel local, nacional o internacional
Los estndares pueden ser:
Locales Nacionales Internacionales

Estndares
El objetivo de los estndares es hacer las cosas ms fciles, definiendo caractersticas de objetos y sistemas que se utilizan cotidianamente
Ejemplos: teclado de telfono, teclado QWERTY

Toda la industria funciona con estndares

Ejemplo: Construccin

Tambin la industria informtica

Estndares de pantallas, teclados, conectores, incluso mobiliario Ejemplo: la inclinacin del teclado debe estar entre 0 y 25 grados

Estndares

Estndares de la interfaz
Objetivo: conseguir un software ms fcil y seguro, estableciendo unos requisitos mnimos de fabricacin, eliminando inconsistencias y variaciones innecesarias en las interfaces

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 tienen 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 ms 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

Estndares

Clasificacin
Tipos de estndares
Estndares de iure Estndares de facto

Estndares

Estndares de iure
Son generados por comits con estatus legal y gozan del apoyo de un gobierno o institucin para producir estndares Para hacer un estndar de iure se ha de seguir un proceso complejo:
Documento preliminar pblico Enmiendas Aprobacin (tras cierto tiempo, a veces ao) Ejemplo: Ansi C

Estndares de iure

Comits
ISO IEC ANSI IEEE CEN W3C

En Informtica tienen estatus legal para definir estndares de iure:

Asociacin Internacional para Estndares Comisin Electrotcnica Internacional Instituto Nacional Americano para Estndares Instituto de Ingenieros Elctricos y Electrnicos Americano Comit Europeo para la Estandarizacin Consorcio para la World Wide Web

Estndares

Estndares de facto
Son estndares que nacen a partir de productos de la industria que tienen un gran xito en el mercado o desarrollos hechos por grupos de investigacin en la Universidad que tienen una gran difusin Son aceptados como tales por su uso generalizado Su definicin se encuentra en manuales, libros o artculos Ejemplos: Sistema X-Windows Lenguaje C Normas CUA

Estndares de iure en IPO

Los estndares de la interfaz son relativamente recientes Algunos de los ms importantes son:
ISO/IEC 9126: Evaluacin de productos software: caractersticas de calidad y directrices para su uso ISO 9241: requisitos ergonmicos para trabajar con terminales de presentacin visual (VDT) ISO/IEC 10741: interaccin de dilogos ISO/IEC 11581: smbolos y funciones de los iconos ISO 11064: diseo ergonmico de centros de control ISO 13406: requisitos ergonmicos para trabajar con presentaciones visuales basadas en paneles planos ISO 13407: procesos de diseo centrados en la persona para sistemas interactivos

Estndares de iure en IPO

Algunos aspectos cubiertos por la ISO 9241 (requisitos ergonmicos para trabajar con terminales de presentacin visual):
Requisitos de la presentacin visual Requisitos de teclado Diseo de estaciones de trabajo y requisitos de las posturas Requisitos para la visualizacin con reflejos Requisitos para colores visualizados Requisitos para dispositivos de entrada no-teclado Principios de dilogos Presentacin de informacin Dilogos de mens Dilogos de manipulacin directa Dilogos para completar formularios

Contenidos
Introduccin Principios y directrices Estndares
De Iure De Facto

Guas de estilo
Comerciales Corporativas Guas de estilo para la web

Consideraciones

Guas 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 diseos en un conjunto de principios y directrices 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

Guas de estilo
Pueden ser de dos tipos:
Guas de estilo comerciales Guas de estilo corporativas

Ventaja: aseguran una mejor usabilidad mediante la consistencia que imponen En el lenguaje industrial se hace referencia a las guas de estilo como el look and feel

Guas de estilo

Guas de estilo comerciales

Son producidas por fabricantes de software y hardware, y son en general estndares de facto
Apple Motif OS/2 CUA Windows Open Look CDE, Common Desktop Environment Java Swing

Contienen directrices que se concretan a muy bajo nivel

Guas de estilo

Apple (1985)

Guas de estilo

Apple (1985)

Guas de estilo

Apple (1985)

Guas de estilo

Apple (1985)

Guas de estilo

CUA (Common User Access)

Publicadas en 1987 por IBM y Microsoft Se adoptaron universalmente por la fuerza de IBM (estndar de facto) Windows, OS/2 y Motif son los estndares ms importantes que siguen esta norma

Guas de estilo

Motif

OSF (Open Software Foundation)

Guas de estilo

OpenLook
SUN Microsystems y AT&T

Guas de estilo

CDE

Common Desktop Environment Interfaz grfica para UNIX Desarrollado por IBM, HP, Novell y SUN Aprobado por X/Open, organizacin de estndares en el mundo UNIX Basado en estndares de facto de la industria como X.11, Motif y Tooltalk

Guas de estilo

Microsoft

Guas de estilo

Java Look and Feel

Java permite la ejecucin de un mismo programa en distintas plataformas utilizando la interfaz grfica correspondiente, gracias al AWT (Abstract Window Toolkit) Con la aparicin del conjunto de componentes Swing, parte de las JFC (Java Foundation Classes), se dispone de una apariencia grfica propia, denominada Metal Adems de Metal existen otras apariencias:
Motif look and feel Windows look and feel MacOs look and feel

Guas de estilo

Java Swing

Java Look and Feel

MacOS Look and Feel

Windows Look and Feel

Motif Look and Feel

Guas de estilo

Java Swing

Guas de estilo

Java Swing

Guas de estilo

CUA

Estndar de facto desarrollado por IBM y Microsoft Define los componentes de la interfaz que deben mantenerse entre aplicaciones Objetivos:
Usabilidad y consistencia de la aplicacin Consistencia entre aplicaciones

Guas de estilo CUA

Sistemas de ventanas
Motif

Windows

OS/2

Guas de estilo CUA

Principios bsicos de diseo

Los usuarios tienen el control del dilogo Los usuarios tienen que desarrollar un modelo conceptual de la interfaz
Uso de metforas
Metfora de la sobremesa: los usuarios ven carpetas y documentos, no programas y archivos. El sistema establece la asociacin datos-programas

Sistema dirigido por el usuario Consistencia Hacer la interfaz transparente

Guas de estilo CUA

Modelo grfico
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 grfico:
Presentacin Acciones Interaccin

Guas de estilo CUA

Presentacin
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 atencin del usuario

Acciones
Permiten al usuario crear o manipular objetos Se realizan mediante combinaciones de mens y cajas de dilogo

Guas de estilo CUA

Acciones
Mens

Mens desplegables Mens en cascada (no ms de dos niveles)

Guas de estilo CUA

Acciones
Cajas de dilogo

Presentan/recogen informacin Ventana mvil de tamao fijo Aparece durante el procesamiento de una accin del usuario, cuando se requiere informacin para completarla Se utiliza una elipsis (...) tras el nombre del botn o elemento de men que abre la caja No usan mens. Usan botones para llamar a las acciones Botones: confirmar, cancelar, ayuda

Guas de estilo CUA

Acciones
No modal

Tipos de cajas de dilogo

Permite a los usuarios continuar con su trabajo sin completar el dilogo

Modal
Requiere que los usuarios completen la caja de dilogo antes de continuar

Guas de estilo CUA

Acciones
Caja de mensajes

Es un tipo especial de caja de dilogo que se utiliza exclusivamente para mostrar mensajes a los usuarios

Guas de estilo CUA

Interaccin
Es el nivel a travs del cual los usuarios interaccionan con los componentes de la interfaz Consta de:
Seleccin de objeto
Los usuarios apuntan a un objeto que desean manipular y lo seleccionan de manera visible

Ejecucin de la accin
Se selecciona una opcin de men y si es preciso se completa con una caja de dilogo La ejecucin de la accin debe ser visualizada

Guas de estilo CUA

Interaccin

Seleccin de objeto

Ejecucin de accin

Guas de estilo CUA

Interaccin
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 ratn El teclado y el ratn tienen una indicacin visual para indicar al usuario dnde se encuentra

Guas de estilo CUA

Interaccin
Indicacin visual
Teclado
Seleccin de campos (caja de lneas discontinuas) Entrada de campos (cursor de texto)

Ratn
Un puntero indica la posicin del ratn

Guas de estilo CUA

Interaccin
nfasis
Trata de realzar la importancia de algunos elementos de interaccin para que el usuario cuando interacciona pueda saber:
Foco de la entrada Opciones disponibles Opciones no disponibles Estado actual de las opciones

Guas de estilo CUA

Interaccin
Tipos de nfasis:
nfasis nfasis nfasis nfasis actual de cursor de seleccin de no disponible del estado

Guas de estilo CUA

Interaccin
Seleccin
Seleccin con el ratn
Clic, Doble-clic, Mayus+clic, Ctrl+clic, Arrastrar y seleccionar

Seleccin con el teclado

Tabulacin, flechas, Mayus y Ctrl (seleccin), Alt (mens)

Guas de estilo CUA

Interaccin
Acciones comunes
La consistencia en acciones comunes es importante para reforzar el modelo conceptual del usuario Existen acciones que son comunes a la mayora de las aplicaciones, y que CUA define:
Abrir fichero Imprimir Tipo de letra

Guas de estilo CUA

Componentes
CUA define una serie de componentes y describe sus propiedades
Botones de radio (radio button) Botones de comprobacin (check button) Botones pulsables (push button)

Guas de estilo CUA

Componentes
Caja de grupo (group box) Campo de texto (text box) Caja de lista (list box) Caja de combinacin (combo box)

Guas de estilo CUA

Componentes
Indicador de progreso
Cambio del puntero Ventana de progreso de la accin

Control de desplazamiento

Guas de estilo CUA

Ayuda

Permite resolver las dudas de los usuarios Interaccin

Tecla F1 Seleccionando el botn de ayuda Seleccionando el men de ayuda

Tipos de ayuda
Ayuda contextual Tutorial Glosario

Guas de estilo

Guas de estilo para la Web

Disear para la Web es diferente de disear interfaces de usuario tradicionales Algunos principios son aplicables pero la Web tiene sus particularidades Una caracterstica 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 guas de estilo Web
Apple IBM Sun W3C Yale Center for Advanced Instructional Media National Cancer Institute (NIC)

Guas de estilo para la Web

Apple, Sun
Apple Sun

www.geo.tu-freiberg.de/docs/apple/web_design/intro.html sut1.sut.ac.th/StyleGuide/Printing_Version.html

Guas de estilo para la Web

IBM

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

Guas de estilo para la Web

W3C

El W3C alberga la Iniciativa de Accesibilidad Web (WAI), patrocinada por varias organizaciones Las guas juegan un papel importante para crear sitios web accesibles WAI ofrece tres guas diferentes:
Web Content Accessibility Guidelines (WCAG) Authoring Tool Accessibility Guidelines (ATAG) User Agent Accessibility Guidelines (UAAG)

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

Guas de estilo para la Web

W3C

Web Content Accessibility Guidelines (WCAG)

Authoring Tool Accessibility Guidelines (ATAG) User Agent Accessibility Guidelines (UAAG)

Principios de diseo para hacer los sitios web accesibles. Estudian escenarios que pueden ocasionar problemas a usuarios discapacitados

Asisten a los desarrolladores de herramientas de creacin de contenidos web para que estos sean accesibles
Explican las caractersticas de las interfaces que benefician a las personas con discapacidades (navegacin por teclado, opciones de configuracin, documentacin, comunicacin por voz)

Guas de estilo para la Web

Yale

info.med.yale.edu/caim/manual Es una de las ms reconocidas Cubre todos los elementos bsicos implicados en la creacin de un sitio web Se centra en la interfaz y en los principios de diseo grfico subyacentes al diseo de un sitio web

Guas de estilo para la Web

National Cancer Institute

http://usability.gov/guidelines/ Disponibles en PDF

Guas de estilo

Guas de estilo corporativas

Ayudan a las empresas a dar un mismo estilo a todos sus productos Si una organizacin desea desarrollar su propio estilo corporativo, primero ha de escoger una gua de estilo comercial Esta gua se aumenta con unas caractersticas propias que produzcan una imagen coherente de la organizacin

Guas de estilo

Guas de estilo corporativas

Gua de estilo del producto

Gua de estilo del producto

Gua de estilo del producto

Guas de estilo de la suite de productos

Guas de estilo corporativas

Guas de diseo de las plataformas (Windows, OS/2, UNIX)

Estndares internacionales (ISO, DIN)

Consideraciones
Los estndares y guas proporcionan una base sobre la cual realizar el diseo y desarrollo Sin embargo, el uso de guas no garantiza que la interfaz sea usable Es mejor seguir las guas que no hacerlo. Puede que podamos hacer un diseo mejor sin guas, pero son muchas ms las ventajas que aportan que las desventajas Es conveniente dar facilidades a los diseadores y programadores:
Proporcionar ejemplos en la documentacin Incorporar las guas a las herramientas Dar formacin y entrenamiento

Conclusiones
Los estndares y las guas de estilo facilitan el diseo de interfaces Tambin facilitan el aprendizaje y reducen los errores al permitir al usuario aprovechar el conocimiento adquirido en otros productos Es imprescindible para un diseador de IPO conocer los estndares existentes y las guas ms adecuadas al entorno en el que va a trabajar