01 UXN CDMX XXXIX - Historia y evolución del diseño de interfaces visuales - Adriana Atzimba
Interfaces Visuales
-
Upload
juan-francisco-sirimarco -
Category
Documents
-
view
25 -
download
3
description
Transcript of 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
Curso de HCI para sitios WebCurso de HCI para sitios Web PPáágina gina 22
--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.
Curso de HCI para sitios WebCurso de HCI para sitios Web PPáágina gina 33
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
Curso de HCI para sitios WebCurso de HCI para sitios Web PPáágina gina 44
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--
Curso de HCI para sitios WebCurso de HCI para sitios Web PPáágina gina 55
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
Normas de DiseNormas de Diseñño o --Interfaces TextualesInterfaces Textuales--
Curso de HCI para sitios WebCurso de HCI para sitios Web PPáágina gina 66
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
Normas de DiseNormas de Diseñño o --Interfaces TextualesInterfaces Textuales--
Curso de HCI para sitios WebCurso de HCI para sitios Web PPáágina gina 77
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--
Curso de HCI para sitios WebCurso de HCI para sitios Web PPáágina gina 88
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.
Normas de DiseNormas de Diseñño o --Interfaces VisualesInterfaces Visuales--
Curso de HCI para sitios WebCurso de HCI para sitios Web PPáágina gina 99
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
Normas de DiseNormas de Diseñño o --Interfaces VisualesInterfaces Visuales--
Curso de HCI para sitios WebCurso de HCI para sitios Web PPáágina gina 1010
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.
Normas de DiseNormas de Diseñño o --Interfaces VisualesInterfaces Visuales--
Curso de HCI para sitios WebCurso de HCI para sitios Web PPáágina gina 1111
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.
Normas de DiseNormas de Diseñño o --Interfaces VisualesInterfaces Visuales--
Curso de HCI para sitios WebCurso de HCI para sitios Web PPáágina gina 1212
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.
Normas de DiseNormas de Diseñño o --Interfaces VisualesInterfaces Visuales--
Curso de HCI para sitios WebCurso de HCI para sitios Web PPáágina gina 1313
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.
Normas de DiseNormas de Diseñño o --Interfaces VisualesInterfaces Visuales--
Curso de HCI para sitios WebCurso de HCI para sitios Web PPáágina gina 1414
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.
Normas de DiseNormas de Diseñño o --Interfaces VisualesInterfaces Visuales--
Curso de HCI para sitios WebCurso de HCI para sitios Web PPáágina gina 1515
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.
Normas de DiseNormas de Diseñño o --Interfaces VisualesInterfaces Visuales--
Curso de HCI para sitios WebCurso de HCI para sitios Web PPáágina gina 1616
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.
Normas de DiseNormas de Diseñño o --Interfaces VisualesInterfaces Visuales--
Curso de HCI para sitios WebCurso de HCI para sitios Web PPáágina gina 1717
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
Curso de HCI para sitios WebCurso de HCI para sitios Web PPáágina gina 1818
Problemas de DiProblemas de Diáálogo simple y naturallogo simple y natural
-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
Curso de HCI para sitios WebCurso de HCI para sitios Web PPáágina gina 1919
Problemas de DiProblemas de Diáálogo simple y naturallogo simple y natural
-En Admirador Secreto-
Error de Ortografía
Curso de HCI para sitios WebCurso de HCI para sitios Web PPáágina gina 2020
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
Curso de HCI para sitios WebCurso de HCI para sitios Web PPáágina gina 2121
Problemas de Lenguaje del usuarioProblemas de Lenguaje del usuario
-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.
Curso de HCI para sitios WebCurso de HCI para sitios Web PPáágina gina 2222
Problemas de Lenguaje del usuarioProblemas de Lenguaje del usuario
-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.
Curso de HCI para sitios WebCurso de HCI para sitios Web PPáágina gina 2323
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.
Curso de HCI para sitios WebCurso de HCI para sitios Web PPáágina gina 2424
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.
Curso de HCI para sitios WebCurso de HCI para sitios Web PPáágina gina 2525
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.
???
Curso de HCI para sitios WebCurso de HCI para sitios Web PPáágina gina 2626
Problemas de ConsistenciaProblemas de Consistencia
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.
Curso de HCI para sitios WebCurso de HCI para sitios Web PPáágina gina 2727
Problemas de ConsistenciaProblemas de Consistencia
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-
Curso de HCI para sitios WebCurso de HCI para sitios Web PPáágina gina 2828
Problemas de ConsistenciaProblemas de Consistencia
Consistencia visual
Distintos formatos de hipervínculos
No es cliqueable
Sí es cliqueable
-En Mis Archivos-
Curso de HCI para sitios WebCurso de HCI para sitios Web PPáágina gina 2929
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.
Curso de HCI para sitios WebCurso de HCI para sitios Web PPáágina gina 3030
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
Curso de HCI para sitios WebCurso de HCI para sitios Web PPáágina gina 3131
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.
Curso de HCI para sitios WebCurso de HCI para sitios Web PPáágina gina 3232
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-
Curso de HCI para sitios WebCurso de HCI para sitios Web PPáágina gina 3333
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.
Curso de HCI para sitios WebCurso de HCI para sitios Web PPáágina gina 3434
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
Curso de HCI para sitios WebCurso de HCI para sitios Web PPáágina gina 3535
Problemas de AyudasProblemas de Ayudas
-En Todo el Sitio- No se presenta ningún tipo de asistencia, ayuda contextual ni general.