interfaces visuales

Curso de HCI para sitios WebCurso de HCI para sitios Web PPáágina gina 11

Normas de DiseNormas de Diseññoo

Interfaces Textuales y Visuales


--Interfaces Textuales y VisualesInterfaces Textuales y Visuales--

Bla Bla Bla Bla

Diálogo o Interacción Hombre-Computadora

El Diálogo o Interacción Hombre-Computadora es el intercambio observable de información, datos y acciones entre un humano y la computadora o viceversa.

La Interfaz del Usuario es el software y el hardware necesario para soportar el diálogo y permitir que la interacción hombre-computadora se lleve a cabo.


En una Interfaz del Usuario se debe considerar:aFormas de visualizar la información –Visualización-aModos de manifestar el diálogo –Interacción-aMecanismos de programación –Programación-

--Interfaces Textuales y VisualesInterfaces Textuales y Visuales--

El TEXTO como medio:

Interfaz Textual

La IMAGEN o PARADIGMAS DE INTERACCION VISUAL como medios:

Interfaz Visual


a Principios de NielsenDiálogo simple y natural

• Control del diálogo por parte del usuario• Distribución adecuada de la información• No mezclar información importante con la irrelevante• Prompts lógicamente bien diseñados• Escritura correcta, sin errores de tipeo.• Evitar el uso excesivo de mayúsculas y de abreviaturas.• Uso unificado de las funciones predefinidas

Lenguaje del usuario• Usar el lenguaje del usuario.No utilizar palabras técnicas ni extranjeras• Evitar el truncamiento excesivo de datos• Libertad de acción en las entradas del usuario • Grado adecuado de información

Minimizar el uso de la memoria del usuario• Información de la navegación y sesión• Visualización de rangos de entrada admisibles, ejemplos, formatos

1

2

3

Normas de DiseNormas de Diseñño o --Interfaces TextualesInterfaces Textuales--


a Métricas Generales de Evaluación: Principios de Nielsen (Cont.)Consistencia

• Consistencia terminológica• Consistencia visual

Feedback • Información de los estados de los procesos• Información del estado del sistema• Utilización de aclaraciones, validaciones, confirmaciones y mensajes de cierre

Salidas evidentes• Visualización evidente de Opciones de Cancelación, Salidas, de Suspender, de

Deshacer y Modificación

Mensajes de error• Forma de aparición• Información del error, explicar el error y dar alternativas a seguir• Categorización

4

5

6

7



a Métricas Generales de Evaluación: Principios de Nielsen (Cont.)

Prevención de errores• Ejemplificación y formatos de entrada• Detección automática de posibles errores asociados a una entrada de datos• Flexibilidad en las entradas de los usuarios

Atajos

• Adaptación de la navegación del usuario

Ayudas• Tipos de ayudas: generales, contextuales, específicas, en línea• Contenido de las ayudas: información sintáctica y semántica• Diseño global de las ayudas

8

9

10



a Las Normas de Diseño para Interfaces Visuales se aplican de acuerdo a los Paradigmas de Interacción Visual empleados

a Los Paradigmas de Interacción son:• Ventanas

• Menúes

• Feedback Visual

• Manipulación Directa

• Gestos

• Dependencias

• Animaciones

• Browser

• Cajas de Diálogo

Normas de DiseNormas de Diseñño o --Interfaces VisualesInterfaces Visuales--


aVentanas• Funcionalidades sintácticas de las ventanas

• Formas de activación de las ventanas: considerar los mismos mecanismos de activaciónde las mismas. Via el tipeo de teclas, eligiéndola de una lista de ventanas, cliquear directamente sobre algunas de ellas.

• Modo de activación de la ventana: considerar si la ventana se abre en modo exclusivo,donde todos los eventos serán atendidos sólo por ésta, desactivando todas las demás, hasta que se culmineel diálogo con la misma.

• Ambito de la ventana: si es fija, si es movible pero dentro del espacio de la ventana madre, o sise abre en modo independiente, formando un ambiente particular que toma vida propia y se independiza de la ventana llamante.

• Dependencia de la ventana: tener en cuenta la relación entre esta ventana con la ventana llamante, o con las ventanas pares o hermanas.

• Cierre de la ventana: considerar dependencias de la misma respecto de la ventana llamante, si cerrar la hija implica: volver a la madre, cerrar la madre.

• Contenido de la ventana: considerar que los elementos constituyentes tengan el mismo nivel deabstracción, que estén bien distribuídos, que sean fácilmente accesibles.

• Anidamiento de ventanas: evitar un excesivo grado de anidamiento que dificulte la interacción con el sistema e induzca a la pérdida de contexto. Evitar una organización de las ventanas desbalanceadas.



aMenúes• Organización semántica: que sea adecuada, entendible y conveniente para las tareas del

usuario. La descomposición jerárquica que sea la más natural.

• Anidamiento del menú: que el anidamiento no sea excesivo y engorroso.

• Categorización: que se realice una categorización correctamente, por objeto o por acción.Tener encuenta la lógica de la descomposición.

• Descripción de cada opción: que las opcions sean claras, colaborando con mensajes asociados explicativos.

• Niveles de abstracción: que las opciones de cada menú deben pertenecer a los mismos nivelesde abstracción. Que no haya ítems muy generales y otros muy específicos.

• Acceso a las opciones: analizar las formas de acceso a cada opción.

• Reconfiguración de las opciones: si se permite en pos a la adaptabilidad modificar lajerarquía y categorización de los menúes.

• Visualización de las opciones: formas de visualizar el ítem corriente, el seleccionado, eldeshabilitado, el visitado.

• Cantidad de Opciones y Profundidad



aFeedback visual• Visualización del feedback: utilizar formas adecuadas para expresar el estado del sistema,

respetando la homogeneidad.

• Información del feedback: que sea correcto, adecuado al contexto y útil.

• Aparición del feedback: que sea inmediato, que sea una respuesta rápida ante la acción delusuario. Evitar respuestas lentas, donde el usuario ya comienza a concentrarse en otros objetivos.

• La necesidad del feedback: tampoco debe existir una interfaz sumamente cargosa que confirma cada actividad atómica del usuario. Identificar las actividades a confirmar, validar, rechazar,corregir, aclarar o que determinan un procesamiento significativo.

• Reporte de los errores: como regla general, los errores deben ser reportados al usuario tanrápido como se haya concretado, efectivamente producido y detectado para facilitar la posibilidad dereparación del mismo. No antes.

• La necesidad del reporte del error: tampoco debe determinar un interfaz rígida ycontroladora.

• Feedback preventivo: visualizar el estado de las opciones o funciones -habilitadas o no-

• Feedback que refleje el modo corriente: modo de edición, de comando, etc

• Feedback para las demoras: visualizar el tiempo de procesamiento de las funciones.

• Feedback para mapear movimientos de dispositivos de apuntamiento.



aManipulación Directa• Concepto de Unión: Analizar si la representación gráfica es adecuada y permite el reconocimiento

de los objetos representados, aunque no es obligatorio ser una representación icónica.

• Concepto de Distancia: Si disminuye el esfuerzo cognitivo para llevar a cabo la tarea. Si lamanipulación es costosa de realizar o rígida -por ejemplo requiere mucha puntería- se convierte en obsoleta.

• Analizar formas sintácticas: considerar modos para realizar la manipulación -discriminadas pormouse y teclado-.

• Combinar manipulación directa con feedback: representar visualmente las manipulaciones no válidas, por ejemplo trasladar un objeto sobre otro que se inhiba o realizarla y que después el sistema realice la manipulación inversa.

• Que sea obvia: o que venga acompañado de algún mensaje que incite a la realización de dicho movimiento.

• Alcance de la manipulación: si puede sobrepasar una ventana, o un objeto de interacción.



aGestosUna sesión de entrada en gestos consiste de una secuencia o un camino de

puntos logrado por determinadas acciones que el usuario desempeña mediante dispositivos físicos, como el teclado o el mouse.

• Si el trazo es significativo y representativo: si el empleo de los gestos adecuado, si corresponde con la acción semántica que está representando.

• Si la entrada de trazos y grafismos colabora y simplifica la interaccióncon el sistema.

• Modos sintácticos: considerar su eficiencia. Uso del mouse, dedo o lápiz.

• Dirección de los gestos: si es el sistema que responde con gestos o no. Por ejemplo que en el Word ante la corrección de ortografía te subraye o marque los errores ortográficos o te tache las palabras que no existen en el idioma y te sobreescriba una parecida.

• Funciones para gestos: que se provean funciones sintácticas donde se permita borrar los trazos realizados, desmarcar, permitir que sean imprimibles, etc.

• Alcance de los gestos: si puede sobrepasar una ventana, o un objeto de interacción compuesto.



aDependenciasUna dependencia especifica una relación causal que debe ser siempre mantenida.

Sucede cuando al manipular un objeto de la pantalla puede significar consecuencias en la aplicación que, a su vez, causen efectos directos o indirectos en la pantalla

• Durabilidad de la dependencia: Mantener la dependencia siempre durante toda la sesión delusuario donde la misma tenga sentido y colabora con la integridad y coherencia del sistema.

• Visualización implícita de la dependencia: contar con elementos visuales que distingan los objetos relacionados, usar colores, formas, lugares, expresiones, etc.

• Alcance de la dependencia: respetar si la relación entre esos objetos complejos o no va más allá de una caja de diálogo, o pertenece sólo dentro de una ventana, o entre ventanas.

• Configuración de la dependencia: si se permite o no activar o desactivar esos links entre objetos.



aAnimaciónLa animación es una técnica de interacción que visualiza el proceso interno de un

sistema dinámico. Es una parte integral en la interfaz visual donde los cambios en el sistema están provocados por acciones autónomas del propio objeto .

• Cuadros de la animación: si son suficientes para representar el proceso animado.

• Velocidad de la animación: que permita mostrar el dinamismo en una velocidad legible.

• Repetición de la animación: que cuando termine comience nuevamente para volver a reflejarel mensaje que representa.

• Aplicación de la animación: apta para mostrar conceptos dinámicos, feedback, ayudas que indiquen cómo se hace tal actividad, mensajes de error que repitan tus acciones y marquen dónde y cuándose efectuó el error.

• Arranque de la animación: que no esté siempre activada llamando la atención permanentemente sino cuando el usuario focalice su atención en ese objeto, o cuando cliquee en algún botón.

• Funciones sintácticas de la animación: para que arranque, pare, se repita.

• Configuración de la animación: permitir al usuario cmabiar parámetros de velocidad y vecesde repetición.



aBrowsers• Si el contenido es adecuado: si ayuda a visualizar datos múltiples con descripción de sus

atributos.

• Funciones sintácticas asociadas: permitir ordenación por determinados criterios, moverobjetos de lugar, permitir copiar y pegar.

• Configuración del browser: permitir cambiar tipos de letras, determinar qué columnas van,cuántas filas, el criterio a ordenar el listado, la forma de ordenación ascendente o no.

• Configuración por defecto: contar con configuraciones predeterminadas, permitir setear uncierto ordenamiento por default, o tipo de letras o cantidad de filas, determinar qué columnas.

• Si es editable o no.

• Si es de múltiple selección o no.

• Si reúne funciones por atributo, fila o por browser en general.



aCajas de Diálogo y elementos de interacciónLa caja de diálogo puede incluir elementos como labels, edit box, combo box,

radio buttons, check box, list box, entre otros.

• Distribución de los objetos de interacción: no haya superposición o poco espacio cuando se requiere más.

• Forma de ordenación de los elementos: lógica de sectorización.

• Funciones sintácticas a nivel de la caja de diálogo: ayuda, salida, cancelación, movimiento.

• Aspectos de visualización: elección apropiada del fondo, tipografía, botones.

• Funciones a nivel de elemento: de validación, ejemplificación, valores por defecto.



Problemas de DiProblemas de Diáálogo simple y naturallogo simple y natural

Distribución de la Información -En Registración-

No se entiende el pedido de Provincia y Universidad cuyos datos relacionados fueron solicitados anteriormente en el sector de Misceláneos



-En Registración- -En Capacitación-

Ortografía y Gramática incorrecta

-En Página Inicial-Sector de mensajes de error se encuentra juntoa avisos

Distribución de la información



-En Admirador Secreto-

Error de Ortografía


Problemas de Lenguaje del usuarioProblemas de Lenguaje del usuario

-En Registración-Uso de palabras eninglés

Utilización del lenguaje del usuario

-En MisMaterias-No hay información sobre lo que este servicio ofrece al usuario

Grado adecuado de información



-En Registración-

Entradas del usuario

No hay forma de pasar libremente de una parte del formulario a la próxima. Hay controles, validaciones, carga de la página entera, entre otros.Se debe completar y corregir toda la 1°parte del formulario para ver la siguiente.



-En Agenda-

Entradas del usuario

No hay forma de pasar libremente de una parte del formulario a la próxima. Hay controles, validaciones, carga de la página entera, entre otros.Se debe completar y corregir toda la 1°parte del formulario para ver la siguiente.


Problemas de Minimizar la memoriaProblemas de Minimizar la memoria

-En Mis Materias-

Información de navegación y sesión

No hay información sobre los pasos realizados anteriormente. Se había seleccionado previamente el país, la universidad y la facultad.


Problemas de Minimizar la memoriaProblemas de Minimizar la memoria

-En Mi Universidad-

Información de navegación y sesión

Se había seleccionado previamente Mapa Universidad, la facultad, información general, autoridades. Tampoco previene el acceso a información faltante.


Problemas de ConsistenciaProblemas de Consistencia

-En Mis Materias-

Consistencia terminológica

El “Blanquear” limpia los tildes pero no las observaciones.

-En Mail- El mensaje aclaratorio no coincide con las funciones de la página.

-En Agenda- El “Enviar” implica anotar en la agenda y en otros contextos es utilizado para enviar efectivamente mensajes. El “Actualizar” no realiza nada.

???



Consistencia terminológica

-En Mail- Bandeja de Entrada es mencionada como INBOX

En Bandeja de entrada, Direcciones y Carpetas referencia “Borrar lo seleccionado”cuando en realidad es lo tildado.



Consistencia visual

Distintos formatos y ubicaciones de la opción “Volver” en los diferentes contextos.

Distintas ubicaciones y tipos de mensajes de error

-En Pasantías-

-En Foros--En Mapa Universidad-

-En Mis Materias-

-En Becas--En Agenda-

-En Agenda-

-En Cartelera-



Consistencia visual

Distintos formatos de hipervínculos

No es cliqueable

Sí es cliqueable

-En Mis Archivos-


Problemas de FeedbackProblemas de Feedback

Información de los estados de los procesos

-En Registración- Al completar la 1°parte del formulario, presionás en “Continuar” y tarda varios segundos sin ningún tipo de explicación.

Información del estado del sistema

-En Pantalla inicial- Todas las funciones están deshabilitadas y no hay un aviso explícito de este estado.


Problemas de FeedbackProblemas de Feedback

Utilización de aclaraciones, validaciones, confirmaciones y mensajes de cierre

-En Zapping (Tecnología)- Uno presiona en seleccionar y no hace ni indica nada

-En Mis Materias- Luego de adjuntar las materias tildadas, vuelve al sector de selección de carreras sin ningún mensaje de cierre de transacción

-En Agenda- Al presionar en el ícono adjunto al evento, se borra el mismo sin mensaje de confirmación

-En Mail- Al borrar carpetas no te dá ningún tipo de aclaración ni confirmación


Problemas de Salidas evidentesProblemas de Salidas evidentes

-En Agenda-No se puede salir, deshacer ni cancelar.

-En Registración- No se puede cancelar o deshacer la parte de formulario escrita.

-En El Artículo-Como en la mayoría de los servivios no se presentan salidas evidentes.


Problemas de Mensajes de errorProblemas de Mensajes de error

-En Mi Universidad- Presenta un mensaje de error vago y en otro sector carece de mensajes de error.

-En Cursos y Congresos- -En Mapa Universidad-


Problemas de PrevenciProblemas de Prevencióón de erroresn de errores

-En Registración- No realiza validaciones léxicas. No diferencia campos obligatorios de los que no lo son. Obliga a llenar ciertos campos (Celular) con expresiones rígidas.

-En Cartelera- Si no hay anuncios para ese sector que directamente no se haya podido llegar a este punto. Sucede en varios contextos.


Problemas de AtajosProblemas de Atajos

-En Mis Materias- No considera la nacionalidad, universidad, facultad que el usuario ha registrado ya.

-En Agenda- No permite búsquedas o filtros por tipo de evento, el cuál es cargado.

-En Otras Universidades- No considera la nacionalidad del usuario. No presenta búsquedas por lugar, ni por universidad.

-En Buscador- Los resultados no pueden ser consultados, filtrados ni ordenados por idioma, tamaño, título, contenido.

-En Novedades- No hay búsquedas, ni filtros para acceder en forma directa a la información


Problemas de AyudasProblemas de Ayudas

-En Todo el Sitio- No se presenta ningún tipo de asistencia, ayuda contextual ni general.

interfaces visuales

Documents

sitios webcurso de hci

usuario informacin

sitios web ppgina gina

visualescurso de hci

informacin visualizacin

interfaz visualcurso

procesos informacin

informacin sintctica