Capítulo ge

8/3/2019 Captulo ge

1/71

Estndares y guas de estilo

Dra. Irene Olaya Ayaquica Martnez

Facultad de Ciencias de la Computacin, BUAP

8/3/2019 Captulo ge

2/71

Principios

Estn basados en ideas de alto nivel y de aplicacin muygeneral.

Por ejemplo:

Asistencia: asistir al usuario en la realizacin de lasdiferentes tareas.

2

Un principio es una norma o idea fundamental que rige elpensamiento o la conducta. No especifican mtodos paraobtener sus objetivos. Son bastante abstractos.

8/3/2019 Captulo ge

3/71

8/3/2019 Captulo ge

4/71

Principios: IBM (2001)

Simplicidad Apoyo

Familiaridad

Evidencia

Estmulo Satisfaccin

Disponibilidad

Seguridad

Versatilidad

Personalizacin

Afinidad

4

No sacrificar la usabilidad por lafuncionalidad del sistema.

8/3/2019 Captulo ge

5/71


Simplicidad Apoyo

Familiaridad

Evidencia

Estmulo Satisfaccin

Disponibilidad

Seguridad

Versatilidad

Personalizacin

Afinidad

5

Hay que proporcionar el controlsobre el sistema al usuario ysuministrarle asistencia para facilitar

la realizacin de las tareas.

8/3/2019 Captulo ge

6/71


Simplicidad Apoyo

Familiaridad

Evidencia

Estmulo Satisfaccin

Disponibilidad

Seguridad

Versatilidad

Personalizacin

Afinidad

6

Construir el producto segn elconocimiento previo del usuario, loque le permitir progresar

rpidamente.

8/3/2019 Captulo ge

7/71


Simplicidad Apoyo

Familiaridad

Evidencia

Estmulo Satisfaccin

Disponibilidad

Seguridad

Versatilidad

Personalizacin

Afinidad

7

Hacer los objetos y sus controlesvisibles e intuitivos. Emplear siempreque se pueda representaciones del

mundo real en la interfaz.

8/3/2019 Captulo ge

8/71


Simplicidad Apoyo

Familiaridad

Evidencia

Estmulo Satisfaccin

Disponibilidad

Seguridad

Versatilidad

Personalizacin

Afinidad

8

Hacer las acciones previsibles yreversibles. Las acciones de losusuarios deberan producir los

resultados que ellos esperan.

8/3/2019 Captulo ge

9/71


Simplicidad Apoyo

Familiaridad

Evidencia

Estmulo Satisfaccin

Disponibilidad

Seguridad

Versatilidad

Personalizacin

Afinidad

9

Crear una sensacin de progreso ylogro en el usuario.

8/3/2019 Captulo ge

10/71


Simplicidad Apoyo

Familiaridad

Evidencia

Estmulo Satisfaccin

Disponibilidad

Seguridad

Versatilidad

Personalizacin

Afinidad

10

Hacer todos los objetos disponiblesde forma que el usuario pueda usartodos sus objetos en cualquier

secuencia y en cualquier momento.

8/3/2019 Captulo ge

11/71


Simplicidad Apoyo

Familiaridad

Evidencia

Estmulo Satisfaccin

Disponibilidad

Seguridad

Versatilidad

Personalizacin

Afinidad

11

Evitarle errores al usuarioproporcionndole diferentes tipos deayuda, bien de forma automtica o

bien a peticin del propio usuario.

8/3/2019 Captulo ge

12/71


Simplicidad Apoyo

Familiaridad

Evidencia

Estmulo Satisfaccin

Disponibilidad

Seguridad

Versatilidad

Personalizacin

Afinidad

12

Soportar diversas tcnicas deinteraccin, de forma que el usuariopueda seleccionar el mtodo de

interaccin ms apropiado para susituacin.

8/3/2019 Captulo ge

13/71


Simplicidad Apoyo

Familiaridad

Evidencia

Estmulo Satisfaccin

Disponibilidad

Seguridad

Versatilidad

Personalizacin

Afinidad

13

Permitir a los usuarios adaptar lainterfaz a sus necesidades.

8/3/2019 Captulo ge

14/71

8/3/2019 Captulo ge

15/71

Directrices

Ejemplo relacionado con el principio de asistencia: Proporcionar ayuda contextual para cada opcin y objeto

sobre el que pueda posicionarse el cursor.

15

Una directriz es un conjunto de instrucciones o normasgenerales para la ejecucin de una cosa. Son ms especficas yrequieren menos experiencia para entenderlas e interpretarlas

que los principios.

8/3/2019 Captulo ge

16/71

Directrices

Permiten asegurar consistencia en un sistema o familia.

Fundamental para las empresas de desarrollo de software.

16

8/3/2019 Captulo ge

17/71

Estndares

Ejemplos: teclado de telfono, teclado QWERTY.

17

Un estndar es un requisito, regla o recomendacin basadaen principios probados y en la prctica. Representa unacuerdo de un grupo de profesionales oficialmenteautorizados a nivel local, nacional o internacional.

8/3/2019 Captulo ge

18/71

Estndares

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.

18

8/3/2019 Captulo ge

19/71

Estndares de la interfaz

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

19

8/3/2019 Captulo ge

20/71

Clasificacin de Estndares

Estndares de facto.

Estndares de iure.

20

8/3/2019 Captulo ge

21/71

Estndares defacto

Nacen a partir de productos de la industria que tienen ungran xito en el mercado o desarrollos hechos por gruposde investigacin en la Universidad que tienen una grandifusin.

Ejemplos: Sistema X-Windows Lenguaje C

Normas CUA (Common User Access)

21

8/3/2019 Captulo ge

22/71

8/3/2019 Captulo ge

23/71

Comits

En Informtica tienen estatus legal para definir estndares deiure:

ISO Asociacin Internacional para Estndares IEC Comisin Electrotcnica Internacional ANSI Instituto Nacional Americano para

Estndares IEEE Instituto de Ingenieros Elctricos y

Electrnicos Americano CEN Comit Europeo para la Estandarizacin W3C Consorcio para la World Wide Web

23

8/3/2019 Captulo ge

24/71

Estndares de iureen 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 conterminales de presentacin visual (VDT)

ISO/IEC 10741: interaccin de dilogos

24

8/3/2019 Captulo ge

25/71

ISO/IEC 11581: smbolos y funciones de los iconos

ISO 11064: diseo ergonmico de centros de control

ISO 13406: requisitos ergonmicos para trabajar conpresentaciones visuales basadas en paneles planos

ISO 13407: procesos de diseo centrados en la

persona para sistemas interactivos

25

Estndares de iureen IHC

8/3/2019 Captulo ge

26/71

Guas de estilo

Las guas de estilo proporcionan un marco que puede guiara los diseadores a tomar decisiones correctas en susdiseos.

26

8/3/2019 Captulo ge

27/71

Guas de estilo

Pueden ser de dos tipos: comerciales corporativas

Ventaja: aseguran una mejor usabilidad mediante laconsistencia que imponen.

En el lenguaje industrial se hace referencia a las guas de

estilo como el look and feel.

27

8/3/2019 Captulo ge

28/71

Guas de estilo comerciales

Son producidas por fabricantes de software y hardware, yson en general estndares de facto: Apple (MacIntosh) Motif OS/2 Windows Open Look CDE, Common Desktop Environment

Java Swing

Contienen directrices que se concretan a muy bajo nivel.

28

CUA

8/3/2019 Captulo ge

29/71

Guas de estilo Apple (1985)

29

8/3/2019 Captulo ge

30/71

8/3/2019 Captulo ge

31/71

31


8/3/2019 Captulo ge

32/71

8/3/2019 Captulo ge

33/71

33


8/3/2019 Captulo ge

34/71

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

8/3/2019 Captulo ge

35/71

Motif

Es la interfaz lder en el sistema operativo UNIX.

35

8/3/2019 Captulo ge

36/71

36

Motif

8/3/2019 Captulo ge

37/71

Windows95, 98, NT

37

8/3/2019 Captulo ge

38/71

OpenLook

Sun Microsystems y AT&T

38

8/3/2019 Captulo ge

39/71

CDE

Common Desktop Environment.

Interfaz grfica para UNIX Desarrollado por IBM, HP,

Novell y SUN Basado en estndares de facto

de la industria

39

8/3/2019 Captulo ge

40/71

Java Look and Feel

Java permite la ejecucin de un mismo programa en distintasplataformas utilizando la interfaz grfica correspondiente,gracias al AWT (Abstract Window Toolkit).

40

8/3/2019 Captulo ge

41/71

Java Look and Feel

Con la aparicin del conjunto de componentes Swing, partede las JFC ( Java Foundation Classes), se dispone de unaapariencia grfica propia, denominadaMetal.

Adems deMetalexisten otras apariencias: Motif look and feel Windows look and feel MacOs look and feel

41

8/3/2019 Captulo ge

42/71

Java Swing

42

Java Look and Feel

Windows Look and Feel Motif Look and Feel

MacOS Look and Feel

8/3/2019 Captulo ge

43/71

43

Java Swing

8/3/2019 Captulo ge

44/71

44

Java Swing

8/3/2019 Captulo ge

45/71

45

Java Swing

8/3/2019 Captulo ge

46/71

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

8/3/2019 Captulo ge

47/71

Presentacin

Representa el aspecto visual de la interfaz.

Las aplicaciones tienen dos tipos de elementos que hay quepresentar:

Objetos Acciones

47

8/3/2019 Captulo ge

48/71

Acciones

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

48

8/3/2019 Captulo ge

49/71

Acciones

Cajas de dilogo

49

8/3/2019 Captulo ge

50/71

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 sincompletar el dilogo.

50

8/3/2019 Captulo ge

51/71

Acciones

Cajas de mensajes

51

8/3/2019 Captulo ge

52/71

Interaccin

Es el nivel a travs del cual los usuarios interaccionan conlos componentes de la interfaz.

Consta de:

Seleccin de objeto: Ejecucin de la accin:

52

8/3/2019 Captulo ge

53/71

Interaccin

53

Seleccin de objeto Ejecucin de accin

8/3/2019 Captulo ge

54/71

Interaccin

Apuntar y seleccionar:

Los usuarios interaccionan con los componentes de lainterfaz.

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 paraindicar al usuario dnde se encuentra.

54

8/3/2019 Captulo ge

55/71

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

8/3/2019 Captulo ge

56/71

Interaccin

nfasis:

Trata de realzar la importancia de algunos elementosde interaccin para que el usuario cuando interacciona

pueda saber:

Foco de la entrada Opciones disponibles

Opciones no disponibles Estado actual de las opciones

56

8/3/2019 Captulo ge

57/71

Tipos de nfasis:

nfasis del cursor

nfasis de seleccin

nfasis de no disponible

nfasis del estado actual

57

Interaccin

8/3/2019 Captulo ge

58/71

58

Interaccin

8/3/2019 Captulo ge

59/71

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

Interaccin

8/3/2019 Captulo ge

60/71

Componentes

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

60

8/3/2019 Captulo ge

61/71

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

61

Componentes

8/3/2019 Captulo ge

62/71

Componentes

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

Control de desplazamiento

62

8/3/2019 Captulo ge

63/71

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

8/3/2019 Captulo ge

64/71

Guas de estilo para la Web

Varias empresas y organismos han publicado sus guas deestilo Web:

Apple

IBM Sun W3C Yale Center for Advanced Instructional Media

National Cancer Institute (NIC)

64

8/3/2019 Captulo ge

65/71

8/3/2019 Captulo ge

66/71

Desarrollar productos utilizables.

66

Recomendaciones

8/3/2019 Captulo ge

67/71

Involucrar a los usuarios en el proceso de diseo.

67

Recomendaciones

8/3/2019 Captulo ge

68/71

Trabajar en equipo multidisciplinario.

68

Recomendaciones

8/3/2019 Captulo ge

69/71

Tomar en cuenta cmo se lleva a cabo la actividad en el

mundo real.

69

Recomendaciones

8/3/2019 Captulo ge

70/71

8/3/2019 Captulo ge

71/71

Documents

Capítulo ge