7/24/2019 Dise o Interfaces Web
1/75
DISEO DE INTERFACESWEB
USABILIDADHerramientas Avanzadas para el Desarrollode Aplicaciones
Escuela Politcnica Superior
Universidad de Alicante
Departamento de Lenguajes y Sistemas Informticos
7/24/2019 Dise o Interfaces Web
2/75
1 La usabilidad delas interfaces
7/24/2019 Dise o Interfaces Web
3/75
Diseo de interfaces de usuario Qu es el diseo de interfaces de usuario?
El proceso de dibujo consistente en dibujar iconos que brillancuando se acerca el ratn?
Es la serie de decisiones que determinan como modelar lainformacin utilizando controles comunes y metforas ?
El diseo de interfaces es un conjunto de varias tareas El modelado de interfaces de usuario
La arquitectura de las interfaces de usuario
La codificacin de interfaces de usuario
7/24/2019 Dise o Interfaces Web
4/75
Modelado de interfaces de usuario Es el proceso de convertir las tareas que un programa
necesita en un conjunto de ventanas y controles.
Requiere Instinto
Convenciones
Psicologa
Cuidadosas pruebas de usabilidad
7/24/2019 Dise o Interfaces Web
5/75
Arquitectura de interfaces de usuario Es el diseo de cmo utilizar los objetos y cdigo de la
aplicacin.
Debe tener como objetivos crear un diseo consistente ybien organizado que facilite su extensin y reuso deporciones de cdigo
7/24/2019 Dise o Interfaces Web
6/75
Codificacin de interfaces de usuario Es el proceso de escribir cdigo para gestionar la interfaz
de usuario.
Idealmente se deben haber seguido las dos etapasanteriores de forma previa a esta etapa.
7/24/2019 Dise o Interfaces Web
7/75
Resumiendo Las interfaces de usuario definen la forma en la que el programa
interacta con el usuario. Tienen tres objetivos fundamentales
Interpretar lo que el usuario quiere y trasladarlo a la ejecucin de lasdiferentes operaciones.
Recuperar informacin y visualizarla de diferentes formas
Guiar al usuario a travs de la tarea y prevenirle de posibles errores
7/24/2019 Dise o Interfaces Web
8/75
Resumiendo (II) Pueden parecer poco importantes con respecto al total del
programa pero no es as. Una buena interfaz puede facilitar al usuario el uso de todas las
opciones del programa
Un interfaz confusa puede hacer pensar al usuario que el sistema tienemenor funcionalidad de la que realmente tiene.
Una mala interfaz puede dificultar al usuario saber que tiene que haceren cada momento
El usuario suele desear trabajar con interfaces sencillas que trabajancomo ellos esperan
7/24/2019 Dise o Interfaces Web
9/75
Motivaciones Usaras software sin testear?
Escribes programas que sern utilizados por otras personas?
Has observado o analizado a los usuarios mientras usan susoftware?
Has evaluado su interfaz con usuarios reales?
La mayora de los desarrolladores de software no efectan procesosde evaluacin de usabilidad.
[Milsted et al 89 ] 6% de las compaas de desarrollo de software
Mi interfaz es buena No hay tiempo ni dinero
Nunca evaluamos las interfaces, y han funcionado
Otras excusas ....
7/24/2019 Dise o Interfaces Web
10/75
Programadores vs. Diseadores
Los programadores no son los usuarios finales Una interfaz tpica de un programador
7/24/2019 Dise o Interfaces Web
11/75
Que es una Interfaz a Usuario?
Generalmente, se suele decir que la interfaz comprendelos dispositivos E/S, y el software que los administra
Tambin debe incluirse cualquier otro aspecto que tratecon el uso humano de las computadoras Documentacin
Entrenamiento
Soporte tcnico
Contexto de uso
7/24/2019 Dise o Interfaces Web
12/75
Importancia
Paradoja de la productividad Las grandes inversiones tecnolgicas no han producido los
incrementos de productividad esperados ej. re-entrenamiento constante de los usuarios ante nuevos productos
y/o nuevas versiones (upgrades) de sistemas interactivos
Facilidad de uso Los usuarios no desean leer manuales extensos ni consumir
tiempo aprendiendo la forma de operar un sistema
7/24/2019 Dise o Interfaces Web
13/75
ImportanciaAlgunos estudios sobre desarrollode interfaces :
48 % (promedio) cdigo 50 % (promedio) tiempo de
implementacin
Determinante en el xito o fracaso
de un sistema interactivo Macintosh Therac 25
7/24/2019 Dise o Interfaces Web
14/75
Importancia Nombres de comandos peligrosos
(Reportado en la prensa inglesa, segn [Newman and Lamming, 1995])
En el editor ed, carcter . es usado para seleccionar una lnea de texto,y , para seleccionar el documento completo
Ambas teclas son adyacentes en el teclado
Intentando cambiar una lnea A heavy poll is expected ... A A heavy turnout is expected ... Puede producirse fcilmente un error cambiando poll a turnout en todo el
documento En una eleccin inglesa, los documentos de un candidato Pollack fueronimpresos como Turnoutack
Se atribuy el error a una falla del computador
7/24/2019 Dise o Interfaces Web
15/75
Importancia
Comandos Unix
rm *~ borra todos los archivos de backup
rm * ~ borra todo!
Y no existe undo ...
7/24/2019 Dise o Interfaces Web
16/75
Importancia Phobos 1 nunca lleg a Marte
(Reportada por Norman, en CACM 1/90 [Norman 90], obtenidade Science Magazine)
No mucho tiempo luego del lanzamiento, un controlador en
tierra omitiuna letra en un envo de una serie de comandosenviados a la nave espacial.
Infortunadamente, est omisin produjo el cdigo
correspondiente a una secuencia de testeo
La secuencia de testeo, almacenada en ROM, estabadestinada a ser utilizada solamente con la nave en tierra
La nave entr en una cada, la cual no se pudo evitar
El controlador fue desplazado a otras tareas....
7/24/2019 Dise o Interfaces Web
17/75
Importancia IranAir 655
(Reportado en [Lee 92])
En 1988, la fragata USS Vincennes dispar un misil a un Airbus A-300, deIran Air, con 290 personas.
El sistema de armamento Aegis, a bordo del Vincennes, tena un softwaresofisticado para identificar y monitorear potenciales blancos.
Sin embargo, la pantalla principal no mostraba la informacin acerca de laaltitud de los potenciales blancos (esta altitud tena que ser leda en otrasconsolas)
El Airbus fue interpretado como un caza F-14, debido a que no se leycorrectamente la altura.
Irnicamente, una nave escolta con un equipamiento ms viejo, fue capazde interpretar la altitud de la nave correctamente, pero no pudo intervenir atiempo.
7/24/2019 Dise o Interfaces Web
18/75
Importancia Un teclado para acelerar la operacin ms frecuentemente
utilizada en MS Windows
7/24/2019 Dise o Interfaces Web
19/75
Importancia
Lecciones: La mayora de las fallas en los sistemas hombre-mquina se
deben a diseos pobres No toman en cuenta las capacidades y habilidades de los usuarios
Generalmente son rotulados como fallas del sistema o erroreshumanos, no como fallas de diseo
7/24/2019 Dise o Interfaces Web
20/75
2 Diseo interfaces
7/24/2019 Dise o Interfaces Web
21/75
Utilidad y usabilidad
Utilidad La funcionalidad del sistema interactivo provee las operaciones
necesarias
Usabilidad Grado de facilidad en el uso del sistema interactivo Decrementa los costos
Previene cambios en el software antes de su uso
Elimina parte del entrenamiento necesario
Incrementa la productividad Menores tiempos para realizar las tareas Menos errores
7/24/2019 Dise o Interfaces Web
22/75
Usabilidad
La usabilidad puede ser definida en el contexto de laaceptabilidad de un sistema
7/24/2019 Dise o Interfaces Web
23/75
Usabilidad
Determinada por: Facilidad de aprendizaje
El usuario puede comenzar rpidamente su trabajo
Eficiencia
Alta productividad Facilidad de memorizacin
No requiere re-aprendizaje
Errores Pocos errores, y subsanables
Satisfaccin subjetiva Agradable para el usuario
7/24/2019 Dise o Interfaces Web
24/75
Usabilidad
No todas las caractersticas de usabilidad tienen elmismo peso en un diseo Aplicaciones crticas (control areo, reactores nucleares)
Perodos de entrenamiento largos, para asegurar menor cantidad deerrores
Aplicaciones industriales y comerciales (bancos, seguros) El tiempo de entrenamiento es costoso La eficiencia es importantsima
10% de reduccin en el tiempo de una tarea significa 10% menos de recursosnecesarios
Aplicaciones de entretenimiento y oficina (procesadores palabra,juegos) La facilidad de aprendizaje, tasa de errores y la satisfaccin subjetiva
es muy importante debido a la alta competencia
7/24/2019 Dise o Interfaces Web
25/75
Aprendizaje
Curvas de aprendizaje El diseo de algunos sistemas est centrado en la facilidad de
aprendizaje
Otros sistemas enfatizan la eficiencia para usuarios expertos
Algunos proveenfacilidad de aprendizaje
y un modo experto intentan obtener lo
mejor de ambas curvas
7/24/2019 Dise o Interfaces Web
26/75
Formas comunes de medir la usabilidadde un sistema Aprendizaje
Seleccionar algunos usuarios novatos de un sistema, medir el tiempopara realizar ciertas tareas.
Distinguir entre usuarios con y sin experiencia computacional
Eficiencia
Obtener usuarios expertos, medir el tiempo para realizar algunas tareastpicas
Memorizacin Obtener usuarios casuales, medir el tiempo para realizar tareas tpicas
Errores
Contabilizar los errores menores e importantes realizados por usuariosal efectuar alguna tarea especfica
Satisfaccin subjetiva: Preguntar a los usuarios su opinin subjetiva, luego de intentar usar el
sistema para una tarea real
7/24/2019 Dise o Interfaces Web
27/75
Roles en una IU
Operador
Ncleo
Funcional
Software
de la IU
Look
&Feel
Sistema Interactivo
Requeri-
mientos
Diseador
SI
Especif.
Tareas
DiseadorNF Diseadorsoftware IU
Diseador
IU
Implem.
Herram.
Herram.Construcc.
7/24/2019 Dise o Interfaces Web
28/75
Roles en una IU Operador / usuario / usuario final
Persona que utilizar el sistema interactivo.
Diseador del sistema Desarrolla la arquitectura global de un SI
Especifica las tareas que sern efectuadas dentro de cada mdulo
Diseador de la interfaz de usuario Define la IU con la cual interactuar el operador
Utiliza la especificacin de tareas
Necesita comprender: Tareas a ser resueltas Necesidades del operador Costos y beneficios de las UI particulares
En trminos del operador y los costos de implementacin y mantenimento
7/24/2019 Dise o Interfaces Web
29/75
Roles en una IU
Diseador del ncleo funcional o programador de la
aplicacin Crea la estructura de software necesaria para implementar las tareas
semnticas de la aplicacin (no incluidas en la IU)
Diseador del software de la interfaz a usuario Disea la estructura del software que implementar la interfaz definida
por el diseador de la IU.
Desarrollador de herramientas crea herramientas para la construccin de interfaces
No todos los actores se encuentran presentes en el proceso dedesarrollo de un SI
7/24/2019 Dise o Interfaces Web
30/75
Diseadores de Interfaces Porqu tener diseadores especializados en interfaces?
Producen interfaces con menos errores
Interfaces permitiendo una ejecucin ms rpida
Los programadores no piensan de igual forma que los operadores
Los programadores poseen un modelo del sistema, no un modelo delusuario
Diferentes clases de interfaces y problemas
Pueden trabajar conjuntamente con:
Usuarios Programadores
Diseadores del sistema
Especialistas en diseo grfico, factores humanos, sicologa, etc..
7/24/2019 Dise o Interfaces Web
31/75
Complejidad del diseo de IUs
Es fcil hacer las cosas difciles. Es difcil hacer las
cosas fciles
Dificultades de los diseadores para comprender las tareas delusuario
Especificaciones iniciales incompletas o ambiguas La comprensin completa de un SI se adquiere a travs de su uso.
La interfaz debe satisfacer las necesidades, experiencia yexpectativas de los usuarios previstos.
Amplia diversidad de usuarios, con diferentes caractersticas.
Los programadores tienen dificultades en pensar como losusuarios
7/24/2019 Dise o Interfaces Web
32/75
Complejidad del diseo de IUs
Complejidad inherente de las tareas y los dominios Es difcil lograr SI fciles de usar, si las aplicaciones poseen
muchas funciones ej. MS Word, con aprox. 300 comandos.
ej. algunos programas CAD poseen cerca de 1000 funciones.
Requerimientos especficos del dominio ej. distintos requerimientos de los programas CAD, de acuerdo al dominio
asistido (mecnica, electrnica, arquitectura, ...)
7/24/2019 Dise o Interfaces Web
33/75
Complejidad del diseo de IUs
Diversos aspectos del diseo involucrados Estndares
Documentacin
Internacionalizacin
Rendimiento Detalles de distinto nivel
Factores externos
Aspectos legales
Tiempo de programacin y testeo
Otros .... Es imposible optimizar todos estos criterios a la vez.
Deben privilegiarse los aspectos ms importantes en cada caso, yobtener un balance entre ellos
7/24/2019 Dise o Interfaces Web
34/75
Aspectos diseo IUs
Estndares Las IUs deben adherirse a los estndares requeridos por su
plataforma ej. guas de estilo de Macintosho Motif.
Deben satisfacerse los estndares establecidos en versionesanteriores del producto, o productos relacionados de lacompetencia
Criterios de diseo grfico
Disposicin espacial, colores, diseo de conos, fuentes de texto.
Generalmente realizado por diseadores grficos profesionales
7/24/2019 Dise o Interfaces Web
35/75
Aspectos diseo IUs Documentacin, mensajes y textos de ayuda
La provisin de buenos mensajes de ayuda y manualesincrementa la usabilidad del SI Su influencia es mayor que la modificacin de la interfaz El grupo del proyecto debiera incluir buenos escritores tcnicos
Internacionalizacin Los productos pueden ser utilizados por usuarios con diferentes
lenguajes No implica solamente la traduccin de cadenas de texto Puede incluir diferentes formatos de fechas u horas, rediseos de
layouts, diferentes esquemas de colores, nuevos conos, etc.
7/24/2019 Dise o Interfaces Web
36/75
Aspectos diseo IUs Rendimiento
Los usuarios no toleran interfaces que operen lentamente ej. primeras versiones de Xerox Star no aceptadas por usuario
productividad ms alta tiempos de respuesta muy largos
Detalles de alto y bajo nivel Una interfaz con un modelo global incorrecto ser inutilizable Los detalles de bajo nivel deben ser perfeccionados para satisfacer
al usuario Si la colocacin de un botn o un item de un men no es aceptada por
los operadores, stos desecharn la interfaz
7/24/2019 Dise o Interfaces Web
37/75
Aspectos diseo IUs
Factores externos Las causas de las fallas de muchos sistemas son independientes
del diseo del software (razones polticas, organizativas o sociales) ej. si los usuarios perciben que el SI amenaza su trabajo, pueden
boicotear el desarrollo del sistema
Aspectos legales La copia de un diseo exitoso es ilegal.
ejs. inconvenientes entre Lotus,Appley Microsoft
7/24/2019 Dise o Interfaces Web
38/75
Aspectos diseo IUs
Tiempo de programacin y testeo El refinamiento iterativo mejora la calidad de una interfaz, pero
incrementa el tiempo de desarrollo.
Otros Pueden existir requerimientos especiales de aplicaciones
orientadas a determinados tipos de usuarios colaboracin entre mltiples usuarios
usuarios con discapacidades
7/24/2019 Dise o Interfaces Web
39/75
Complejidad del diseo de IUs
Las teoras, principios y guas actuales suelen no sersuficientes Diversidad de metodologas, teoras y directivas disear UIs
La experiencia y prctica de los diseadores es la principal
contribucin a la calidad de la IU, no un mtodo o teora. No siempre es conveniente su utilizacin
ej. reglas de consistencia o metforas
Suelen ser demasiado especficas y/o demasiado generales cubren solo aspectos limitados del comportamiento, y no siempre
pueden ser generalizadas.
7/24/2019 Dise o Interfaces Web
40/75
Complejidad del diseo de IUs Dificultad del diseo iterativo
El 87% de los proyectos de desarrollo utilizan alguna forma de diseoiterativo [Myers & Rosson 92]
La intuicin del diseador acerca la solucin de un problema
observado puede ser errnea
La nueva versin del sistema puede ser peor que la anterior
Aunque una iteracin puede mejorar un diseo, ste nunca obtendr lacalidad de una IU originalmente bien diseada.
Es difcil obtener usuarios reales, para efectuar los tests.
Los participantes en los tests suelen ser seleccionados por iniciativa
propia poseen mayor predisposicin e inters que los usuarios reales.
Cada iteracin debera involucrar diferentes usuarios.
El diseo iterativo puede ser largo y costoso
Los tests formales pueden tomar hasta 6 semanas
7/24/2019 Dise o Interfaces Web
41/75
Algunas estrategias
Una interfaz bien diseada debe facilitar el trabajo delos usuarios
Para ello es preciso entender el modelo mental del
usuario y sus habilidades psquicas, fsicas ypsicolgicas
Los diseadores no son expertos en estos temas ynecesitan unos principiosgenerales de diseo
consensuados por los expertos Estos principios son conceptos de muy alto nivel que
se plasman en unas reglas de diseoque guan aldiseador con el fin de conseguir productos usables
7/24/2019 Dise o Interfaces Web
42/75
Algunas estrategias
La mayora de los sistemas de GUI han publicadodirectrices que indican cmo asociar estos principiosabstractos 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 correctasen sus diseos
Pueden tener una gran variedad de formas y puedenser obtenidas en diferentes sitios:Artculos de revistas acadmicas, profesionales o comerciales
Manuales y guas de estilo de empresas de software
7/24/2019 Dise o Interfaces Web
43/75
Principios y directrices
Principios
Estn basados en ideas de alto nivel y de aplicacin muygeneral. Por ejemplo: Asistencia: asistir al usuario en la realizacin de las diferentes
tareas
No especifican mtodos para obtener sus objetivos. Sonbastante abstractos
Un principio es una sentencia en un sentido muyamplio que normalmente est basada en lainvestigacin hecha de cmo las personas
aprenden y trabajan
7/24/2019 Dise o Interfaces Web
44/75
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
7/24/2019 Dise o Interfaces Web
45/75
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
P i i i
7/24/2019 Dise o Interfaces Web
46/75
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 interfazAcomodar a los usuarios con diferentes niveles de habilidad
Reducir la carga de memoria de los usuarios Hacer la interfaz consistente
P i i i
7/24/2019 Dise o Interfaces Web
47/75
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
P i i i
7/24/2019 Dise o Interfaces Web
48/75
Principios
Dix (1998)
Facilidad de aprendizaje
Flexibilidad
Robustez
P i i i
7/24/2019 Dise o Interfaces Web
49/75
Principios
IBM (2001)
SimplicidadApoyo Familiaridad
Evidencia Estmulo Satisfaccin Disponibilidad
Seguridad Versatilidad PersonalizacinAfinidad
P i i i
7/24/2019 Dise o Interfaces Web
50/75
Principios
IBM (2001)
Simplicidad
Apoyo Familiaridad
Evidencia Estmulo Satisfaccin Disponibilidad
Seguridad Versatilidad PersonalizacinAfinidad
No sacrificar la usabilidad por lafuncionalidad del sistema
Principios
7/24/2019 Dise o Interfaces Web
51/75
Principios
IBM (2001)
Simplicidad Apoyo
Familiaridad
Evidencia Estmulo Satisfaccin Disponibilidad
Seguridad Versatilidad PersonalizacinAfinidad
Hay que proporcionar el controlsobre el sistema al usuario ysuministrarle asistencia parafacilitar la realizacin de las
tareas
Principios
7/24/2019 Dise o Interfaces Web
52/75
Principios
IBM (2001)
SimplicidadApoyo Familiaridad
Evidencia Estmulo Satisfaccin Disponibilidad
Seguridad Versatilidad PersonalizacinAfinidad
Construir el producto segn elconocimiento previo del usuario,lo que le permitir progresarrpidamente
Principios
7/24/2019 Dise o Interfaces Web
53/75
Principios
IBM (2001)
SimplicidadApoyo Familiaridad
Evidencia Estmulo Satisfaccin Disponibilidad
Seguridad Versatilidad PersonalizacinAfinidad
Hacer los objetos y sus controlesvisibles e intuitivos. Emplearsiempre que se puedarepresentaciones del mundo real
en la interfaz
Principios
7/24/2019 Dise o Interfaces Web
54/75
Principios
IBM (2001)
SimplicidadApoyo Familiaridad
Evidencia Estmulo
Satisfaccin Disponibilidad
Seguridad Versatilidad PersonalizacinAfinidad
Hacer las acciones previsibles yreversibles. Las acciones de losusuarios deberan producir losresultados que ellos esperan
Principios
7/24/2019 Dise o Interfaces Web
55/75
Principios
IBM (2001)
SimplicidadApoyo Familiaridad
Evidencia Estmulo Satisfaccin
Disponibilidad
Seguridad Versatilidad PersonalizacinAfinidad
Crear una sensacin de progresoy logro en el usuario
Principios
7/24/2019 Dise o Interfaces Web
56/75
Principios
IBM (2001)
SimplicidadApoyo Familiaridad
Evidencia Estmulo Satisfaccin Disponibilidad
Seguridad Versatilidad PersonalizacinAfinidad
Hacer todos los objetosdisponibles de forma que elusuario pueda usar todos susobjetos en cualquier secuencia y
en cualquier momento
Principios
7/24/2019 Dise o Interfaces Web
57/75
Principios
IBM (2001)
SimplicidadApoyo Familiaridad
Evidencia Estmulo Satisfaccin Disponibilidad
Seguridad Versatilidad PersonalizacinAfinidad
Evitarle errores al usuarioproporcionndole diferentes tiposde ayuda bien de formaautomtica o bien a peticin del
propio usuario
Principios
7/24/2019 Dise o Interfaces Web
58/75
Principios
IBM (2001)
SimplicidadApoyo Familiaridad
Evidencia Estmulo Satisfaccin Disponibilidad
Seguridad Versatilidad
PersonalizacinAfinidad
Soportar diversas tcnicas deinteraccin, de forma que elusuario pueda seleccionar elmtodo de interaccin ms
apropiado para su situacin
Principios
7/24/2019 Dise o Interfaces Web
59/75
Principios
IBM (2001)
SimplicidadApoyo Familiaridad
Evidencia Estmulo Satisfaccin Disponibilidad
Seguridad Versatilidad Personalizacin
Afinidad
Permitir a los usuarios adaptar lainterfaz a sus necesidades
Principios
7/24/2019 Dise o Interfaces Web
60/75
Principios
IBM (2001)
SimplicidadApoyo Familiaridad
Evidencia Estmulo Satisfaccin Disponibilidad
Seguridad Versatilidad Personalizacin Afinidad
Permitir con un buen diseovisual que los objetos sean afinesa otros de la realidad cotidiana
7/24/2019 Dise o Interfaces Web
61/75
Guas de estilo
Para asegurar la consistencia de las diferentes partes deun sistema o de una familia de sistemas es fundamentalpara los desarrolladores basar sus diseos en unconjunto de principios y directrices
Por este motivo es tan importante para lasorganizaciones que desarrollan softwaredisponer de unagua que puedan seguir sus desarrolladores
Estas guas se denominan guas de estiloy varan
mucho en sus objetivos
7/24/2019 Dise o Interfaces Web
62/75
Guas de estilo
Pueden ser de dos tipos: Guas de estilo comerciales Guas de estilo corporativas
Ventaja: aseguran una mejor usabilidad mediante laconsistencia que imponen
En el lenguaje industrial se hace referencia a las guas deestilo como el look and feel
Guasdeestilo
7/24/2019 Dise o Interfaces Web
63/75
Guas de estilo
Guas de estilo para la Web Disear para la Web es diferente de disear interfaces de
usuario tradicionales. Algunos principios son aplicablespero la Web tiene sus particularidades
Una caracterstica importante de la Web es la falta deinterfaces 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 WebApple IBM Sun W3C Yale Center for Advanced Instructional Media Usability.gov
Guas de estilo para la Web
7/24/2019 Dise o Interfaces Web
64/75
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 sitiosweb 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
7/24/2019 Dise o Interfaces Web
65/75
Guas de estilo para la Web
W3C
Web Content Accessibility Guidelines (WCAG) Principios de diseo para hacer los sitios web accesibles.
Estudian escenarios que pueden ocasionar problemas ausuarios discapacitados
Authoring Tool Accessibility Guidelines (ATAG)Asisten a los desarrolladores de herramientas de creacin decontenidos web para que estos sean accesibles
User Agent Accessibility Guidelines (UAAG) 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
7/24/2019 Dise o Interfaces Web
66/75
p
Yale
http://www.webstyleguide.com/wsg3/index.html
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 unsitio web
Guas de estilo para la Web
http://www.webstyleguide.com/wsg3/index.htmlhttp://www.webstyleguide.com/wsg3/index.htmlhttp://www.webstyleguide.com/wsg3/index.htmlhttp://www.webstyleguide.com/wsg3/index.htmlhttp://www.webstyleguide.com/wsg3/index.html7/24/2019 Dise o Interfaces Web
67/75
p
Usability.gov
Diseo centrado en el usuario, creado para diseadores webde pginas gubernamentales
http://www.usability.gov/
http://www.usability.gov/http://www.usability.gov/http://www.usability.gov/7/24/2019 Dise o Interfaces Web
68/75
3 Ejemplosinterfaces
7/24/2019 Dise o Interfaces Web
69/75
7/24/2019 Dise o Interfaces Web
70/75
7/24/2019 Dise o Interfaces Web
71/75
7/24/2019 Dise o Interfaces Web
72/75
Aplicacin WEB
7/24/2019 Dise o Interfaces Web
73/75
Parte Privada: Programacin
7/24/2019 Dise o Interfaces Web
74/75
7/24/2019 Dise o Interfaces Web
75/75
Top Related