Verificación y Verificación y ValidaciónValidación

Verificación y Verificación y ValidaciónValidación

5.7 GUI Funcionalidad, 5.7 GUI Funcionalidad, Performance, entre otros.Performance, entre otros.

Ingeniería InformáticaIngeniería InformáticaKetnia Nataly Navarrete MéndezKetnia Nataly Navarrete Méndez

Daniel Peralta GuzmanDaniel Peralta Guzman

Interfaz de Usuario• La interfaz de usuario es el medio con que el

usuario puede comunicarse con una máquina, un equipo o una computadora, y comprende todos los puntos de contacto entre el usuario y el equipo.

• Es un programa informático que actúa de interfaz de usuario, utilizando un conjunto de imágenes y objetos gráficos para representar la información y acciones disponibles en la interfaz. Su principal uso, consiste en proporcionar un entorno visual sencillo para permitir la comunicación con el sistema operativo de una máquina o computador.

Interfaz gráfica de usuario

Tipos de Interfaces Tipos de Interfaces gráficasgráficas

Tipos de Interfaces Tipos de Interfaces gráficasgráficas

GUI’s y Zooming user Interface

• GUI's y Zooming user interface Los tipos de GUIs que se encuentran en juegos

de computadora, y los GUIs avanzados basados en realidad virtual, se usan con frecuencia en tareas de investigación. La interfaz de enfoque del usuario o ZUI (Zooming User Interface), que es un adelanto lógico de las GUI, mezclando 3D con 2D. Podría expresarse como "2 dimensiones y media en objetos vectoriales de una dimensión".

• Los "GUIs de uso específico." Un ejemplo de un GUI de uso específico es la ahora familiar touchscreen o pantalla táctil (pantalla que al ser tocada efectúa los comandos del ratón en el software).

Interfaz de usuario de Pantalla táctil

Interfaz natural de Usuario

• Las NUI naturales son aquellas en las que se interactúa con un sistema, aplicación, etc., sin utilizar dispositivos de entrada como ratón, teclado, lápiz óptico, etc. En lugar de éstos se utilizan las manos o las yemas de los dedos.

Pasos para el diseño de una interfaz

• Principios de UCD• Análisis del modelo ISO 13407• Evaluación contextual• Crear a una persona• Manual de la página • Crear Prototipo de Baja

fidelidad • Evaluación de usabilidad con el

usuario:– Diseño contextual– Inspección de estándares– Evaluación con un prototipo de

baja fidelidad– Cuestionarios de usabilidad del

prototipo– Formato de tareas y de

observación del usuario– Análisis de tareas usando KLM

• Evaluación de usabilidad sin usuarios:

– Elaboración de Escenarios– Aplicación de Heurísticas– Paseo Cognitivo

• Comparación de resultados– Evaluación con usuarios– Evaluación sin usuarios

• Presentación de la información• Descripción de la página con

las correcciones hechas

Diseño Centrado en el Usuario

• Es una filosofía de diseño que tiene por objetivo la creación de productos que resuelvan necesidades concretas de sus usuarios finales, consiguiendo la mayor satisfacción y mejor experiencia de uso posible con el mínimo esfuerzo de su parte.

Usabilidad

• Se refiere a la facilidad con que las personas pueden utilizar una herramienta particular o cualquier otro objeto fabricado por humanos con el fin de alcanzar un objetivo concreto. La usabilidad también puede referirse al estudio de los principios que hay tras la eficacia percibida de un objeto.

Grado de Usabilidad• Se mide a partir de pruebas empíricas y relativas.

• Empírica porque no se basa en opiniones o sensaciones, sino en pruebas de usabilidad realizadas en laboratorio u observadas mediante trabajo de campo.

• Relativa porque el resultado no es ni bueno ni malo, sino que depende de las metas planteadas (por lo menos el 80% de los usuarios de un determinado grupo o tipo definido deben poder instalar con éxito el producto X en N minutos sin más ayuda que la guía rápida) o de una comparación con otros sistemas similares.

Principios Básicos• Facilidad de Aprendizaje: Está relacionada con la

predicibilidad, sintetización, familiaridad, la generalización de los conocimientos previos y la consistencia.

• Facilidad de Uso: facilidad con la que el usuario hace uso de la herramienta, con menos pasos o más naturales a su formación específica.

• Flexibilidad: relativa a la variedad de posibilidades con las que el usuario y el sistema pueden intercambiar información.

• Robustez: es el nivel de apoyo al usuario que facilita el cumplimiento de sus objetivos.

Medidas para la Usabilidad

1) Análisis o evaluación heurística2) Test de Usabilidad

Test de Usabilidad

• Un test de usabilidad es una medida concreta y objetiva de la usabilidad de una herramienta o sistema tomada a partir de usuarios verdaderos con tareas reales.

Proceso de Desarrollo de Interfaces

Medición (test de usabilidad)

• Planificación (desarrollo del plan, definición de las medidas, selección de participantes, formación de observadores, preparación de los materiales).

• Test (prueba piloto, tests con usuarios).

Análisis o Evaluación• Conclusión (análisis de los datos,

elaboración del informe, resultados y recomendaciones).

• Comparación contra estándares (internos y/o externos), versiones anteriores del mismo producto y productos competidores.

• Verificación de las diferencias.• Generación de nuevas metas.

Herramientas de Medición

Evaluación Heurística de Jackob

Nielsen• Hable el lenguaje de los usuarios Use frases y conceptos familiares para el

usuario. Presente la información en un orden natural y

lógico para el usuario.• Sea consistente Indique conceptos similares con igual

terminología y gráfica. Utilice convenciones uniformes para la

diagramación y el formato de la información.

• Minimice la carga cognitiva Trate de utilizar el reconocimiento más que la memoria. No fuerce a los usuarios a recordar información entre

documentos. Otorgue enlaces directos a la información necesaria.

• Arme sistemas eficientes y flexibles Diseñe un sistema que pueda ser utilizado por un rango

amplio de usuarios. Brinde instrucciones cuando sean necesarias para

nuevos usuarios pero que no se entrometa en el camino de usuarios avanzados.

Permita a los usuarios avanzados ir directamente al contenido que buscan.

• Diseñe sistemas con criterio minimalista y estético

Elimine información irrelevante o déjela disponible sólo a pedido.

Tenga en cuenta el diseño de factores humanos (ergonomía y diseño visual).

Trate de generar una sensación positiva a nivel estético.

• Agrupación de la información Trate de ordenar la información para que los

documentos sean autocontenidos Cuando los documentos se hagan demasiados largos,

provea navegadores internos. No fuerce a los usuarios a acceder a múltiples

documentos para tomar un sólo concepto.

• Provea niveles de detalle progresivos Organice la información jerárquicamente, con la

general antes que la particular. Aproveche las características del hipertexto para

proveer detalle en demanda, pero no incluirlo en donde hay información más general.

• Provea información sobre ubicación y navegación Provea links directos y facilite el salto entre información

relacionada. Otorgue pistas para que el usuario sepa dónde se

encuentra y a dónde puede ir. Facilite en lo posible una vuelta a la cabecera de la

sección o del sitio. Redacte los enlaces de manera que sea claro el

destino.

• No mienta al usuarioElimine la información errónea o

poco clara.No enlace o se refiera a

información que aún no exista.

8 Reglas de Oro • 1 Busca la consistencia.

Secuencias coherentes de acciones deben ser necesarias en situaciones similares; se debe utilizar terminología idéntica en avisos, menús y pantallas de ayuda, y los mismos comandos  deben ser empleados en todo el proyecto.

• 2 Permite que los usuarios frecuentes utilicen accesos directos.Con el aumento de la frecuencia de uso también aumentan los deseos del usuario para reducir el número de interacciones e incrementar el ritmo de interacción. Abreviaturas, teclas de función y los comandos ocultos son muy útiles para un usuario experto.

• 3 Ofrece retroalimentación informativa.Por cada acción del operador, debe haber algún tipo de retroalimentación. Para las acciones frecuentes y de menor importancia, la respuesta puede ser modesta, mientras que para las acciones poco frecuentes e importantes, la respuesta debería ser más sustancial.

• 4 Diseña acciones secuenciales.Las secuencias de acciones deben organizarse en grupos con un principio, medio y final. La retroalimentación informativa en la realización de un conjunto de acciones da a los operadores la satisfacción de haber cumplido, una sensación de alivio y una indicación de que el camino está libre para prepararse para el siguiente grupo de las acciones.

• 5 Errores simplesEn medida de lo posible, se debe de diseñar el sistema para que el usuario no pueda hacer un error irreparable. Si se comete un error, el sistema debe ser capaz de detectar el error y ofrecer mecanismos sencillos y comprensibles para manejar el error.

• 6 Fácil reversión de las acciones.Esta función alivia la ansiedad, ya que el usuario sabe que los errores se pueden deshacer, además de que fomenta la exploración de opciones desconocidas. Las unidades de reversibilidad puede consistir en una sola acción, una entrada de datos, o un grupo completo de acciones.

• 7 Apoya al usuario con una interfaz amigable.Los operadores experimentados desean tener la sensación control y que el sistema responda a sus acciones adecuadamente. Diseñar el sistema para que los usuarios sean los que inicien cada accion y no los que respondan.

• 8 Reduce la carga de memoria.La limitación humana del procesamiento de información en cuanto a memoria de corto plazo requiere que las pantallas se mantengan simples, la frecuencia de translado entre ventana y ventana se reduzca, y el tiempo suficiente de capacitación para que entienda  los códigos, datos técnicos y las secuencias de acción.

Herramientas Web para Diseñar Interfaces

Hot Gloo• Es una aplicación en

línea desarrollada en Flash para crear Wireframes, cuenta con funciones como arrastar y soltar elementos, capas y más, además recibes una URL para compartir tu trabajo con tus colegas.

Mockingbird • Mockingbird es una

herramienta popular para la creación de maquetas y wireframes. Te permite fácilmente crear, previsualizar, relacionar entre sí, y compartir todos tus wireframes con quien quieras.

Pencil Project • Esta es una extensión

para Firefox que nos permite hacer diagramas detallados e interfaces de usuario increíbles, viene con una variedad de características tales como documentos de varias páginas, en la edición de texto en pantalla, soporte de texto enriquecido, páginas de fondo, la exportación de HTML, PNG y Openoffice.

ProtoShare • ProtoShare

proporciona un herramienta de colaboración fácil de utilizar que permite la creación de proyectos dinámicos que requieren de prototipos y wireframes.

Balsamiq • Balsamiq es una

herramienta interactiva de wireframing que se siente como si estuvieras dibujando con un lápiz y papel, sólo una en la web. La diferencia es con esta herramienta tendrás el control total de los elementos y te permite mover con facilidad o cambiar la posición de los elemntos.

Cacoo • Cacoo es una gran

herramienta de trabajo para dibujo en línea que te permite desarrollar varios diagramas como los gráficos de una red alámbrica, o los mapas de un sitio, además puedes permitir que varios usuarios accedan a tus prototipos para hacer cambios o simplemente ver tu progreso, por lo que lo converte en una herramienta de colaboración.

GUI Studio Design • GUI Design Studio es una

herramienta de diseño de software especializado para cualquiera involucrado en el diseño de interfaz de usuario de aplicaciones, incluyendo diseñadores de experiencia de usuario, analistas, desarrolladores, administradores de proyectos y consultores.

MockupScreens • MockupScreens es

una herramienta interactiva que te permite dibujar maquetas en pantalla, crear un sistema de retroalimentación, y obtener los mejores resultados posibles. Así podrás ver cómo interactúan todos antes de empezar con el código.

Beneficios de la Usabilidad

• Reducción de los costos de aprendizaje y esfuerzos.• Disminución de los costos de asistencia y ayuda al

usuario.• Disminución en la tasa de errores cometidos por el

usuario y del re-trabajo.• Optimización de los costos de diseño, rediseño y

mantenimiento.• Aumento de la tasa de conversión de visitantes a

clientes.• Aumento de la satisfacción y comodidad del usuario.• Mejora la imagen y el prestigio.• Mejora la calidad de vida de los usuarios, ya que reduce

su estrés, incrementa la satisfacción y la productividad.

EjemplosEjemplosEjemplosEjemplos

Aplicación de la Usabilidad en Aplicación de la Usabilidad en proyectos Webproyectos Web