PRINCIPIOS Y ESTÁNDARES DE INTERFAZ
El diseño de
la interfaz ha estado dirigido a evitar errores, teniendo en cuenta
paralelamente la creación de interfaces útiles y amigables. Se ha buscado
simplificar la validación de los datos garantizando una validación intrínseca
de los mismos, procurando facilitar la corrección de errores lógicos tanto en
la introducción de la información como en cualquier otro momento del
tratamiento de la misma.
Los
formularios manejan los datos en memoria y solo se actualiza en la base de
datos cuando se indique salvarlos
§ . Los diseñadores no
son expertos en estos temas y necesitan unos principios generales de diseño consensuados por los expertos
§ Estos principios
son conceptos de muy alto nivel que se plasman en unas reglas de diseño que guían al diseñador con el fin de conseguir
productos usables
§ Objetivo:
conseguir un software más fácil y seguro, estableciendo unos requisitos mínimos
de fabricación, eliminando inconsistencias y variaciones innecesarias en las
interfaces
§
Son
requisitos, reglas o recomendaciones basadas en principios probados y
en práctica.
- Los diseñadores no
son expertos en estos temas y necesitan unos principios generales de
diseño consensuados por los expertos
- Estos principios son
conceptos de muy alto nivel que se plasman en unas reglas de diseño que
guían al diseñador con el fin de conseguir productos usables
PRINCIPIOS PARA EL DISEÑO DE INTERFACES DE
USUARIO.
Existen principios relevantes para el diseño e
implementación de IU, ya sea para las IU gráficas, como para la Web.
Anticipación
Las aplicaciones deberían intentar anticiparse a las
necesidades del usuario y no esperar a que el usuario tenga que buscar la
información, recopilarla o invocar las herramientas que va a utilizar.
AUTONOMÍA
La computadora, la IU y el entorno de trabajo deben estar
a disposición del usuario. Se debe dar al usuario el ambiente flexible
para que pueda aprender rápidamente a usar la aplicación. Sin embargo, está
comprobado que el entorno de trabajo debe tener ciertas cotas, es decir, ser
explorable pero no azaroso.
PERCEPCIÓN
DEL COLOR
Aunque se utilicen convenciones de color en la IU, se
deberían usar otros mecanismos secundarios para proveer la información a
aquellos usuarios con problemas en la
visualización de colores
VALORES
POR DEFECTO
No se debe utilizar la palabra "Defecto" en una
aplicación o servicio. Puede ser reemplazada por "Estándar" o "Definida
por el Usuario", "Restaurar Valores Iniciales"
o algún otro término especifico que describa lo que está sucediendo. Los valores por
defecto deberían ser opciones inteligentes y sensatas. Además, los mismos
tienen que ser fáciles de modificar.
Para lograr una
mayor consistencia en la IU se requiere profundizar en diferentes aspectos que
están catalogados en niveles. Se realiza un ordenamiento de mayor a menor
consistencia:
Interpretación del comportamiento del usuario: la IU debe comprender el significado que le
atribuye un usuario a cada requerimiento. Ejemplo: mantener el significado de
las los comandos abreviados (shortcut-keys) definidos por el usuario.
Estructuras invisibles: se requiere
una definición clara de las mismas, ya que sino el usuario nunca podría llegar
a descubrir su uso. Ejemplo: la ampliación de ventanas mediante la extensión de
sus bordes.
Pequeñas estructuras visibles: se puede
establecer un conjunto de objetos visibles capaces de ser controlados por el
usuario, que permitan ahorrar tiempo en la
ejecución de tareas específicas. Ejemplo: ícono y/o botón para impresión.
Una sola aplicación o servicio: la IU
permite visualizar a la aplicación o servicio utilizado como un componente
único. Ejemplo: La IU despliega un único menú, pudiendo además acceder al mismo
mediante comandos abreviados.
Un conjunto de aplicaciones o servicios: la IU
visualiza a la aplicación o servicio utilizado como un conjunto de componentes.
Ejemplo: La IU se presenta como un conjunto de barras de comandos desplegadas
en diferentes lugares de la pantalla, pudiendo ser desactivadas en forma
independiente.
Consistencia del ambiente: la IU se
mantiene en concordancia con el ambiente de trabajo. Ejemplo: La IU utiliza
objetos de control como menúes, botones de comandos de manera análoga a otras
IU que se usen en el ambiente de trabajo.
Consistencia de la plataforma: La IU es
concordante con la plataforma. Ejemplo: La IU tiene un esquema basado en ventanas,
el cual es acorde al manejo del sistema operativo Windows.
EFICIENCIA
DEL USUARIO
Se debe considerar la productividad del
usuario antes que la productividad de la máquina. Si el usuario debe esperar la
respuesta del sistema por un período prolongado, estas pérdidas de tiempo se
pueden convertir en pérdidas económicas para la organización. Los mensajes de ayuda deben ser sencillos y
proveer respuestas a los problemas. Los menúes y etiquetas de botones deberían
tener las palabras claves del proceso.
LEY
DE FITT
El tiempo para alcanzar un objetivo es una función de la
distancia y tamaño del objetivo. Es por ello, que es conveniente usar objetos
grandes para las funciones importantes.
INTERFACES
EXPLORABLES
Siempre que sea posible se debe permitir que el usuario
pueda salir ágilmente de la IU, dejando una marca del estado
de avance de su trabajo, para que pueda continuarlo en otra oportunidad.
OBJETOS
DE INTERFAZ HUMANA
Los objetos de interfaz humana no son necesariamente los
objetos que se encuentran en los sistemas orientados a objetos. Estos pueden
ser vistos, escuchados, tocados o percibidos de alguna forma. Además, estos
objetos deberían ser entendibles, consistentes y estables.
USO
DE METÁFORAS
Las buenas metáforas crean figuras mentales fáciles de
recordar. La IU puede contener objetos asociados al modelo conceptual en forma
visual, con sonido u otra
característica perceptible por el usuario que ayude a simplificar el uso del
sistema.
CURVA
DE APRENDIZAJE
El aprendizaje de
un producto y su usabilidad no son mutuamente excluyentes. El ideal es que la
curva de aprendizaje sea nula, y que el usuario principiante pueda alcanzar el
dominio total de la aplicación sin esfuerzo.
REDUCCIÓN
DE LATENCIA
Siempre que sea posible, el uso de tramas
(multi-threading) permite colocar la latencia en segundo plano (background).
Las técnicas de trabajo multitarea posibilitan el trabajo ininterrumpido del
usuario, realizando las tareas de transmisión y computación de datos en segundo
plano.
PROTECCIÓN
DEL TRABAJO
Se debe poder asegurar que el usuario nunca pierda su
trabajo, ya sea por error de su parte, problemas de transmisión de datos, de
energía, o alguna otra razón inevitable.
AUDITORÍA
DEL SISTEMA
La mayoría de los navegadores de Internet (browsers), no mantienen información
acerca de la situación del usuario en el entorno, pero para cualquier
aplicación es conveniente conocer un conjunto de características tales como:
hora de acceso al sistema, ubicación del usuario en el sistema y lugares a los
que ha accedido, entre otros. Además, el usuario debería poder salir del
sistema y al volver a ingresar continuar trabajando en lugar dónde había
dejado.
LEGIBILIDAD
Para que la IU favorezca la usabilidad del sistema de
software, la información que se exhiba en ella debe ser fácil de ubicar y leer.
Para lograr obtener este resultado se deben tener en cuenta alguna como: el
texto que aparezca en la IU debería tener un alto contraste, se debe utilizar
combinaciones de colores como el
texto en negro sobre fondo blanco o amarillo suave. El tamaño de las fuentes tiene
que ser lo suficientemente grande como para poder ser leído en monitores estándar.
Es importante hacer clara la presentación visual (colocación/agrupación de
objetos, evitar la presentación de excesiva información.
INTERFACES
VISIBLES
El uso de Internet, ha favorecido la implementación de
interfaces invisibles. Esto significa que el usuario siempre ve una página
específica, pero nunca puede conocer la totalidad del espacio de páginas de
Internet. La navegación en las aplicaciones debe ser reducida a la mínima expresión.
El usuario debe sentir que se mantiene en un único lugar y que el que va
variando es su trabajo. Esto no solamente elimina la necesidad de mantener mapas u otras
ayudas de navegación, sino que además brindan al usuario una sensación de
autonomía.
MODOS DE USO, NAVEGACIÓN, TÉCNICAS DE CODIFICACIÓN Y
DISEÑO VISUAL (COLOR, ICONOS, FONDO DE LETRAS).
La primera
impresión del usuario cuando visita una aplicación web la brinda el diseño de
la interfaz. Es por ello que, para lograr la apariencia adecuada y que el
usuario se sienta confortable, se tienen en cuenta varios aspectos, sobre todo
relacionados con tipografía, colores, gráficos, navegación, composición del
sitio, etc., que a continuación se detallan. En el sistema, el diseño de la
interfaz está basado en páginas Web, se utilizan las tonalidades suaves y
refrescantes. El vocabulario manejado es lo menos técnico posible, acercándose
al utilizado por los usuarios.
Se utilizan
imágenes identificativas como vínculos para la navegación dentro del sitio web.
La letra utilizada en todo el sistema es Times New Roman (12, 16) lográndose un
diseño estándar en todo el sitio. Los mensajes de error son pequeños y en
Español.
Se utilizan
pequeños íconos para una mayor comprensión de las acciones, aunque se
seleccionaron imágenes consecuentes con el significado que se quiere trasmitir.
El fondo de
las páginas es de color blanco para mayor frescura de la vista. Todo esto se ha
hecho con el objetivo de que el uso del sitio brinde comodidad y confort al
usuario.
La finalidad principal de la interfaz grafica
es el de guiar a los usuarios de manera intuitiva a través del sistema y
facilitarle la interacción con el mismo. El sistema se manejará por medio de
interfaces así la información necesaria podrá ser procesada de manera eficiente
y en corto tiempo el sistema tendrá la respuesta a los requerimientos del
usuario, manejando además los errores en los que este pueda incurrir.
Los estándares definidos en este documento
para la interfaz gráfica de usuario, serán tomados como base para el diseño de
los módulos de manera que se cada modulo podrá realizar sus diseños de acuerdo
a la necesidad, pero tomando como base los estándares de este documento.
Para mayor entendimiento se ha definido en
este documento primero estándares de los objetos básicos y luego los compuestos
solo con la finalidad de mejorar el entendimiento de este documento.
DISEÑO VISUAL.
El uso de tipografía,
símbolos, color y otros gráficos estáticos y dinámicos son comúnmente usados
para expresar hechos, conceptos y emociones. Esto compone un diseño gráfico
sistemático orientado a la información que ayuda a la gente a comprender
información compleja. La comunicación visual efectiva para este sistema se basa
en algunos principios básicos de diseño gráfico.
Existen tres factores que pueden considerarse para el
diseño de una interfaz de usuario correcta: factores de desarrollo, factores de
viabilidad y factores de aceptación.
Los factores de desarrollo ayudan a mejorar la
comunicación visual. Esto incluye toolkits y librerías de componentes, soportes
para un rápido prototipado, y adaptabilidad.
COLOR
Las discusiones sobre el color suelen ser confusas porque
científicos, artistas, diseñadores, programadores y profesionales del marketing
describen el color de diferentes formas.
Algunas de estas formas difieren del rojo, verde y azul
que basan el sistema de color “RGB”, familiar para los usuarios de periféricos
con tubos de rayos catódicos (CRTs).
Los siguientes términos aclaran conceptos sobre esta
manera de entender el color:
Matiz (Hue) es la composición espectral de longitud de
onda que produce percepciones de ser azul, naranja, verde, etc. por ejemplo.
Valor (Value) es la cantidad relativa de claridad u
oscuridad del color en un rango desde el negro al blanco (también llamado
intensidad).
Saturación (Chroma) es la pureza del color en una escala
desde el gris a la variante mas viva del color percibido.
Brillo (Brightness) es la cantidad de energía luminosa al
crear el color.
La importancia del color es
comunicar. Los códigos de colores deben respetar el uso profesional y cultural
ya existente de determinados colores. Las connotaciones varían fuertemente
respecto a los diferentes tipos de usuario, especialmente cuando son de
diferentes culturas. Las connotaciones del color deben ser usadas con sumo
cuidado.
ICONOS: Son pequeños gráficos hiperenlace que:
- De forma aislada
- Acompañados de un hipertexto
- Acompañados de una etiqueta
- Acompañados de un "tooltip"
Utilizar ideografías estándar para representar las
acciones de navegación. No ser innovador a este respecto, al menos no en el concepto
básico representado: generará cierto grado de confusión con seguridad.
Para acciones de navegación específicas de nuestro site: es preferible
no utilizar iconos, o, de usarlos, acompañarlos de una etiqueta.
En la mayoría de casos aumenta la usabilidad un simple hipertexto, o un
botón generado sólo con texto y las clases de estilo adecuadas para conferirle
apariencia de botón.
Los tamaños pueden ser variables, aunque se ha demostrado la misma eficacia
para los micro iconos y tienen un peso apreciablemente menor:
o
40 X 40 pixeles Peso < 1 KBytes
o
20 X 20 pixeles Peso < 300 Bytes
o
12 X 12 pixeles Peso < 100 Bytes
TIEMPO DE RESPUESTA O RETROALIMENTACIÓN
La retroalimentación se
produce cuando las salidas del sistema o la influencia de las salidas de los
sistemas en el contexto, vuelven a ingresar al sistema como recursos o
información.
La retroalimentación permite el control de un sistema y
que el mismo tome medidas de corrección en base a la información
retroalimentada.
El tiempo de respuesta del sistema es la primera queja sobre muchas aplicaciones interactivas, en
general se mide desde el punto en que el usuario realiza alguna acción de control el tiempo se respuesta del sistema tiene dos
características importantes:
DURACIÓN: Si la respuesta del sistema se demora mucho la frustración y el estrés del usuario son inevitables.
VARIABILIDAD: Es la desviación del tiempo de
respuesta promedio. Una baja variabilidad permite que el usuario
establezca un ritmo de interacción,
aunque el tiempo de respuesta sea relativamente largo.
MODALIDADES DE DISEÑO EN HCI,
LOCALIZACIÓN E INTERNACIONALIZACIÓN.
INTERNACIONALIZACIÓN: Es la operación por
medio de la cual se modifica un programa, o conjunto de programas en un
paquete, para que pueda adecuarse a múltiples idiomas y convenciones
culturales.
LOCALIZACIÓN: nos referimos
a la operación por la que, sobre un conjunto de programas que ya han sido
internacionalizados, se le proporciona al programa toda la información
necesaria para que pueda manejar su entrada y su salida de un modo que sea
correcto respecto a determinados hábitos lingüísticos y culturales (por ejemplo
el signo de la moneda de un país, el orden en que se expresan mes, día y año en
una fecha.
MÉTODOS MULTIMEDIA, WEB, MODELOS METAFÓRICOS Y
CONCEPTUALES
MULTIMEDIA
DirectX
Conjunto
de interfaces de programación de aplicaciones orientadas a la multimedia La distribución
contiene:
Una
librería en tiempo de ejecución que consta de varias las cuales pueden ser
distribuidas con la aplicación un sistema de desarrollo asociado, el
DirectX SDK,
con varios archivos de librería y de cabeceras.
GDI
(Graphics Device Interface)
Proporciona dibujo 2D y comandos de ventana no
proporciona soporte multimedia.
MCI (Media Control Interface) primer
arquitectura multimedia de Microsoft proporciona comandos para la ejecución
multimedia (play, pause, stop, ...) para audio y vídeo no soporta captura y
edición de vídeo
VFW (Video For Windows)
Primera arquitectura multimedia para Windows
(1990)soporte de archivos AVI incluye herramientas para captura y compresión de
vídeo Tecnologías Multimedia - Desarrollo de Aplicaciones Multimedia 5
QTW (QuickTime for Windows) portada por Apple
de Mac a Windows (1993)al principio solo soportaba reproducción, añadiendo posteriormente
captura y compresión
ActiveMovie
Reemplazo de VFW (1996) soporte de AVI, WAV y
MPEG DirestShow
Reemplazo de ActiveMovie (1998) soporta
captura y compresión
Integrada originalmente en la arquitectura
DirectX (DirectX SDK)
(Actualmente
disponible en Windows SDK) sustituida progresivamente por la nueva arquitectura
Media Foundation
CONCEPTUALES:
Son los que realmente no están en el plano, pero se pueden deducir:
Punto: Por ejemplo, una
flor roja en un jardín de donde predomine el amarillo.
Línea:
Una fotografía arquitectónica las refleja.
Plano:
Una área de cualquier forma geométrica coloreada.
Volumen:
Objetos que tengan profundidad volumétrica.
LA METÁFORA
Antes de comenzar a diseñar la interfaz es
imprescindible pensar el concepto que se necesita expresar. Elegir una metáfora
adecuada apoya y refuerza el concepto y el proceso de comunicación sin
distraer, proporcionando una realidad “física” para el entorno abstracto en el
que se tienen que introducir los usuarios.
Es
una estrategia para el diseño de interfaces es el uso de metáforas. Un ejemplo
clásico es el diseño de la interface con el usuario de las computadoras
Macintosh. Antiguamente, para realizar cualquier operación con una computadora
era necesario escribir una serie de comandos con una sintaxis perfecta. Desde
que Apple Computer empezó a utilizar metáforas, es posible para usuarios no
conocedores de lenguajes de programación realizar operaciones con la
computadora. Ya no es necesario saber los comandos con los cuales se desecha un
archivo. Ahora es posible simplemente tomar el archivo y llevarlo al bote de la
basura. Gracias al uso correcto de interfaces, la tecnología resulta transparente
al usuario.
La metáfora ha dado paso, sin embargo, a una nueva perspectiva: la virtualidad. Bajo la perspectiva de la virtualidad
La metáfora ha dado paso, sin embargo, a una nueva perspectiva: la virtualidad. Bajo la perspectiva de la virtualidad
PSICOLOGÍA EN HCI.
Las expectativas extraídas de los
estudios de la psicología cognitiva acerca de que las palabras con mayor índice
de familiaridad serian más fáciles de aprender fueron contradichas por el
hallazgo de que estas fueron las menos precisas de todas.
La
psicología cognoscitiva ha jugado un papel importante en el diseño de interfaces
pues provee las bases teóricas sobre cómo procesa información el ser humano.
Sin embargo, las implicaciones del diseño de interfaz llegan más allá de lo
estrictamente técnico o cognitivo, llegando a poner en duda la esencia misma de
nuestras personas y nuestras relaciones. Este breve ensayo esboza la relación
entre tecnologías de comunicación e identidad, a partir del análisis de la
virtualidad como un fenómeno que ha trascendido su mera funcionalidad como
estrategia para el diseño de interfaz. Las tecnologías, para ser usadas
efectivamente, requieren ser transparentes. Transparencia significa "la
cualidad de una configuración específica de medios (y no de los medios mismos)
en la cual el usuario ignora la presencia de los componentes del sistema y es capaz
de ver a través del sistema para concentrarse completamente en la función última.
Integrantes:
Ascanio, Maryeling.
Chouza, Jose.
Prado, Williana.
Torrealba, Anadilis.
PNF informática , sección 4.(NOCTURNO).
Que buen Aporte Muchachos
ResponderEliminarHola muchas gracias , si realmente lo es un tema muy completo sin dudas ;) gracias.
ResponderEliminarhola, buenas noches! muy buena la informacion, me sirvio de muchoo.. (y)
ResponderEliminar