Post on 07-Apr-2018
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
Principios: IBM (2001)
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
Principios: IBM (2001)
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
Principios: IBM (2001)
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
Principios: IBM (2001)
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
Principios: IBM (2001)
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
Principios: IBM (2001)
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
Principios: IBM (2001)
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
Principios: IBM (2001)
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
Principios: IBM (2001)
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
Guas de estilo Apple (1985)
8/3/2019 Captulo ge
32/71
8/3/2019 Captulo ge
33/71
33
Guas de estilo Apple (1985)
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