Estndares y guas de estilo

Dra. Irene Olaya Ayaquica Martnez Facultad de Ciencias de la Computacin, BUAP

Principios
Un principio es una norma o idea fundamental que rige el pensamiento o la conducta. No especifican mtodos para obtener sus objetivos. Son bastante abstractos.

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.

Principios

Simpson (1985) Schneiderman (1992) Preece (1994) Mandel (1997) Dix (1998) Nielsen (2000) IBM (2001)

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)

10

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)

11

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)

12

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)

13

Simplicidad Apoyo Familiaridad Evidencia Estmulo Satisfaccin Disponibilidad Seguridad Versatilidad Personalizacin Afinidad

Permitir a los usuarios adaptar la interfaz a sus necesidades.

Principios: IBM (2001)

14

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.

Directrices
Una directriz es un conjunto de instrucciones o normas generales para la ejecucin de una cosa. 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.

15

Directrices

Permiten asegurar consistencia en un sistema o familia.

Fundamental para las empresas de desarrollo de software.

16

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.

Ejemplos: teclado de telfono, teclado QWERTY.

17

Estndares
Toda

la industria funciona con estndares. Ejemplo: Construccin. la industria informtica. Estndares de pantallas, teclados, conectores, incluso mobiliario. Ejemplo: la inclinacin del teclado debe estar entre 0 y 25 grados.

Tambin

18

Estndares de la interfaz

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

19

Clasificacin de Estndares

Estndares de facto.
Estndares de iure.

20

Estndares de facto

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.

Ejemplos: Sistema X-Windows Lenguaje C Normas CUA (Common User Access)

21

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 aos) Ejemplo: Ansi C

22

Comits

En Informtica tienen estatus legal para definir estndares de iure:

ISO IEC ANSI IEEE

CEN W3C

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

23

Estndares de iure en IHC

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

24

Estndares de iure en IHC

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

25

Guas de estilo

Las guas de estilo proporcionan un marco que puede guiar a los diseadores a tomar decisiones correctas en sus diseos.

26

Guas de estilo

Pueden ser de dos tipos: comerciales corporativas Ventaja: aseguran una mejor consistencia que imponen. usabilidad mediante la

En el lenguaje industrial se hace referencia a las guas de estilo como el look and feel.

27

Guas de estilo comerciales

Son producidas por fabricantes de software y hardware, y son en general estndares de facto: Apple (MacIntosh) Motif CUA OS/2 Windows Open Look CDE, Common Desktop Environment Java Swing Contienen directrices que se concretan a muy bajo nivel.

28

Guas de estilo Apple (1985)

29

Guas de estilo Apple (1985)

30

Guas de estilo Apple (1985)

31

Guas de estilo Apple (1985)

32

Guas de estilo Apple (1985)

33

Guas de estilo CUA

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

34

Motif

Es la interfaz lder en el sistema operativo UNIX.

35

Motif

36

Windows95, 98, NT

37

OpenLook

Sun Microsystems y AT&T

38

CDE

Common Desktop Environment. Interfaz grfica para UNIX Desarrollado por IBM, HP, Novell y SUN Basado en estndares de facto de la industria

39

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).

40

Java Look and Feel

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

41

Java Swing

Java Look and Feel

MacOS Look and Feel

Windows Look and Feel

42

Motif Look and Feel

Java Swing

43

Java Swing

44

Java Swing

45

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

46

Presentacin

Representa el aspecto visual de la interfaz. Las aplicaciones tienen dos tipos de elementos que hay que presentar:

Objetos Acciones

47

Acciones

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

48

Acciones

Cajas de dilogo

49

Acciones

Tipos de cajas de dilogo: Modal Requiere que los usuarios completen la caja de dilogo antes de continuar. No modal Permite a los usuarios continuar con su trabajo sin completar el dilogo.

50

Acciones

Cajas de mensajes

51

Interaccin

Es el nivel a travs del cual los usuarios interaccionan con los componentes de la interfaz. Consta de:

Seleccin de objeto: Ejecucin de la accin:

52

Interaccin

Seleccin de objeto

Ejecucin de accin

53

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.

54

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.

55

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

56

Interaccin
Tipos

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

nfasis nfasis nfasis nfasis

57

Interaccin

58

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).

59

Componentes

Botones de radio (radio button) Botones de comprobacin (check button) Botones pulsables (push button)

60

Componentes

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

61

Componentes

Indicador de progreso Cambio del puntero Ventana de progreso de la accin Control de desplazamiento

62

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

63

Guas de estilo para la Web

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)

64

Recomendaciones

Tomar en cuenta las necesidades de los usuarios.

65

Recomendaciones

Desarrollar productos utilizables.

66

Recomendaciones

Involucrar a los usuarios en el proceso de diseo.

67

Recomendaciones

Trabajar en equipo multidisciplinario.

68

Recomendaciones

Tomar en cuenta cmo se lleva a cabo la actividad en el mundo real.

69

Recomendaciones

Por qu algunos productos como un iPod son aceptados universalmente por personas de todo el mundo, mientras que las pginas web son diferentes dependiendo de la diversidad cultural?

70

71