SlideShare ist ein Scribd-Unternehmen logo
1 von 15
Downloaden Sie, um offline zu lesen
Diseño de Interfaces de Usuarios




                                                                                  Contenido



                                                                                                    1       Click to add Title
                                                                                                              Introduccion
                                Diseño de Interfaces              Profesor:
                                    de Usuarios                                                     2       Click to add Title
                                                                                                                Objetivos
                                                            Diaz Muñante Jorge
                                      Ciclo 2012-1
                                                                                                    1
                                                                                                    3       Click to add Title
                                                                                                              Planificacion

                                                                                                    1
                                                                                                    4       Material de clases
                                                                                                            Click to add Title

                          Introducción al curso                                                     2
                                                                                                    5       Click to add Title
                                                                                                               Evaluacion

                                                                                                    1
                                                                                                    6      Recomendaciones
                                                                                                            Click to add Title




        Introducción                                                              Objetivo del curso


         Presentación                                                              – Aprender a diseñar, prototipear y evaluar inferfaces
                                                                                    • Descubrir las tareas del usuario
         ¿qué esperan del curso?                                                    • Limitaciones cognitivas / perceptual que afectan el diseño de las
                                                                                      interfaces
         Objetivos del curso
                                                                                    • Técnicas de evaluación de interfaces
                                                                                    • Importancia del diseño interactivo para su usabilidad
                                                                                    • Tecnologías para crear propotipos e implementar interfaces
                                                                                    • Como trabajar en equipo de trabajo
                                                                                    • Comunicar el resultado del proyecto
                                                                                   – Muchos de estos aspectos forman parte de los trabajos del
                                                                                     futuro




        Advertencia                                                               Planificación
                                                     Bits   Interfaz    Usuario
         Bien escrito                                                              La interacción persona-computadora
         – Español
           • Singular    interfaz
           • Plural      interfaces
         – Ingles
           • Singular    interface
           • Plural      interfaces
         – Latín - inter (entre) - face (cara)
         Mal escrito
         – interfases (significa transición)




Diaz Muñante Jorge                                                                                                                                        1
Diseño de Interfaces de Usuarios




        Planificación                         Planificación


         La interacción persona-computadora    La interacción persona-computadora
         Diseño centrado en el usuario         Diseño centrado en el usuario
                                               Análisis de tareas


                                                                      Secuencia de Tareas    Selección de Tareas




                                                                                  *

                                                                       Iteración de Tareas     Tarea Unitaria




        Planificación                         Planificación


         La interacción persona-computadora    La interacción persona-computadora
         Diseño centrado en el usuario         Diseño centrado en el usuario
         Análisis de tareas                    Análisis de tareas
         Prototipo                             Prototipo
                                               El factor humano




        Planificación                         Planificación


         La interacción persona-computadora    La interacción persona-computadora
         Diseño centrado en el usuario         Diseño centrado en el usuario
         Análisis de tareas                    Análisis de tareas
         Prototipo                             Prototipo
         El factor humano                      El factor humano
         Recomendaciones                       Recomendaciones
                                               Metáforas




Diaz Muñante Jorge                                                                                                 2
Diseño de Interfaces de Usuarios




        Planificación                         Planificación


         La interacción persona-computadora    La interacción persona-computadora
         Diseño centrado en el usuario         Diseño centrado en el usuario
         Análisis de tareas                    Análisis de tareas
         Prototipo                             Prototipo
         El factor humano                      El factor humano
         Recomendaciones                       Recomendaciones
         Metáforas                             Metáforas
         Estándares y guías                    Estándares y guías
                                               Errores y ayuda




        Planificación                         Planificación


         La interacción persona-computadora    La interacción persona-computadora
         Diseño centrado en el usuario         Diseño centrado en el usuario
         Análisis de tareas                    Análisis de tareas

         Prototipo                             Prototipo
                                               El factor humano
         El factor humano
                                               Recomendaciones
         Recomendaciones
                                               Metáforas
         Metáforas
                                               Estándares y guías
         Estándares y guías
                                               Errores y ayuda
         Errores y ayuda                       Estilos de interacción
         Estilos de interacción                Accesabilidad




        Planificación                         Planificación

         La interacción persona-computadora    La interacción persona-computadora
         Diseño centrado en el usuario         Diseño centrado en el usuario

         Análisis de tareas                    Análisis de tareas

         Prototipo                             Prototipo

         El factor humano                      El factor humano
                                               Recomendaciones
         Recomendaciones
                                               Metáforas
         Metáforas
                                               Estándares y guías
         Estándares y guías
                                               Errores y ayuda
         Errores y ayuda
                                               Estilos de interacción
         Estilos de interacción                Accesabilidad
         Accesabilidad                         Internacionalización
         Internacionalización                  Evaluación




Diaz Muñante Jorge                                                                  3
Diseño de Interfaces de Usuarios




        Planificación                                                      Planificacion por semanas
         La interacción persona-computadora
         Diseño centrado en el usuario
                                                                             L    M    M    J    V    S    D          Sem Tema                           PPT
         Análisis de tareas                                                  26   27   28   29   30   31   1    Mar    1   Introduccion                  C1_introduccion
                                                                             2    3    4    5    6    7    8    Abr    2   Diseño centrado usuario       C2_centrado_usuario
         Prototipo                                                           9    10   11   12   13   14   15          3   Prototipos                    C4_prototipos
                                                                             16   17   18   19   20   21   22          4   Factores Humanos              C4_factores_humanos
         El factor humano
                                                                             23   24   25   26   27   28   29          5   Factores Humanos. Trab # 1    C4_factores_humanos

         Recomendaciones                                                     30   1    2    3    4    5    6    May    6   Recomendación diseño          C7_recomendaciones
                                                                             7    8    9    10   11   12   13          7   Recomendación diseño          C7_recomendaciones
         Metáforas                                                           14   15   16   17   18   19   20          8   Examen Parcial
                                                                             21   22   23   24   25   26   27          9   Errores y Ayudas              C8_errores_ayudas
         Estándares y guías                                                  28   29   30   31   1    2    3    Jun   10   Errores y Ayudas              C8_errores_ayudas
                                                                             4    5    6    7    8    9    10         11   Metodos de evaluacion.        C11_evaluacion
         Errores y ayuda
                                                                             11   12   13   14   15   16   17         12   Met. de evaluacion. Trab #2   C11_evaluacion

         Estilos de interacción                                              18   19   20   21   22   23   24         13   Internacionalizacion          C10_internacionalizacion
                                                                             25   26   27   28   29   30   1    Jul   14   Diseño de web                 C12_diseño_webs
         Accesabilidad                                                       2    3    4    5    6    7    8          15   Patrones de HP Web            C12_patrones_webs
                                                                             9    10   11   12   13   14   15         16   Examen Final
         Internacionalización                                                16   17   18   19   20   21   22         17   Examen Sustitutorio

         Evaluación
         Diseño Webs




        Material de apoyo


         Material electronico en campus.dokeos.com
         – Registrar en Dokeos
         – Registrar en el curso
           • El registro es el curso virtual de teoria y de laboratorio.




                                         tlozano




                                                                                  •Ingresa a tu cuenta
                                                                                  •Ingresa a la opción “ordenar mis cursos”




Diaz Muñante Jorge                                                                                                                                                                  4
Diseño de Interfaces de Usuarios




                                                                                         Pagina de DIU - Dokeos




        Bibliografía                                                                     Evaluación


                                                                                            Evaluación     Porcentaje   Termino    Fecha
                                                                                            Examen             15 %     EP         Semana 8
         Shneiderman, Ben, C. Plaisant                                                      Parcial
         Diseño de interfaces de usuario, 4ª Edición
         Pearson, 2006                                                                      Examen Final       35 %     EF         Semana 16
                                                                                            Trabajo            15 %     TP1, TP2   TP1 = Sem 5
                                                                                            practico                               (27 abr)
                                                                                                                                   TP2 = Sem 12
                                                                                                                                   (15 jun)
                                                                                            Laboratorio        35 %     L2*0.1+    Por especificar
                                                                                                                        L3*0.1+    en laboratorio
                                                                                                                        L4*0.15+
                                                                                                                        L5*0.15+
         Norman, Donald                                                                                                 L6*0.15+
         The invisible computer                                                                                         L7*0.35
         MIT Press, 1998
         Aula virtual – link al libro en español (Dokeos)   Nuevo




        Trabajos Practicos                                                               Rol de Exposiciones
          Práctica (Trabajos)                                            15%
             2 Trabajos prácticos (TP1, TP2)                  7.5 % cada uno
                                                                                         Trabajo Practico # 1
                                                                                         Fecha entrega: 27 abril
             Conformar grupo de 3 alumnos.
             Cada grupo interpretara y analizara recomendaciones en el buen diseño de     G #1   G # 3 G # 5 G # 7 G # 9 G # 11
             las interfaces de Microsoft, para la cual se le asignara un tema donde
             encontrara una categoría y tema especifico (Cada grupo tendrá un tema
             diferente)
             Los trabajos se realizaran en base al archivo UXguide.pdf
             Trabajo # 1.
               Fecha: 27 de abril
                                                                                          Trabajo Practico # 2
             Trabajo # 2                                                                  Fecha entrega: 15 junio
               Fecha: 15 de junio
             Cada grupo entregara ambos trabajos, pero lo sustentara en una fecha. (Se
                                                                                          G # 2 G # 4 G # 6 G # 8 G # 10 G # 12
             sorteara la próxima semana)




Diaz Muñante Jorge                                                                                                                                   5
Diseño de Interfaces de Usuarios




        Evaluación                                                                     Interacción Hombre-Computador (IHC, HCI ingles)


         Sustitutorio                                                                   Hombre

                                                                                        – Usuario final de un programa
         – Reemplaza el promedio de E1 y E2
                                                                                        – otras personas de la organización
         – Son By four – A puro dolor
                                                                                        Computador
         – Grupo Kaliente - Iquitos
           • Solo me queda llorar... resignado a perderte... Solo me queda llorar...    – La máquina donde se ejecuta el programa
             dolido y vació …                                                           Interacción
         – Maelo Ruiz – Te va a doler                                                   – el usuario le ordena al computador que debe hacer
           • Pero te vas arrepentir la vida entera
                                                                                        – el computador comunica el resultado al usuario.

                                                                                        No se limita a la situación clásica de una persona sentada delante de un
                                                                                        terminal
                                                                                        – Las computadoras se encuentran en muchas formas




        Interacción al tacto




        Objetivo del IHC                                                               Tipos de interfaz


         Objetivo:
         – Desarrollar o mejorar la seguridad, utilidad, efectividad, eficiencia y
           usabilidad de sistemas que incluyan computadoras
         Para hacer sistemas usables es preciso
         – Comprender los factores (psicológicos, ergonómicos, organizativos y
           sociales) que determinan cómo la gente trabaja y hace uso de las              Interfaz: «conexión física y funcional entre dos aparatos o sistemas
                                                                                         independientes» (DRAE, 22ª edición).
           computadoras
                                                                                         Interfaz de usuario: «Dónde las personas y los bits se encuentan»
         – Desarrollar herramientas y técnicas para ayudar a los diseñadores de          (Negroponte, 1995).
           sistemas interactivos
                                                                                         – «La interfaz de usuario de un sistema consiste de aquellos aspectos
         – Conseguir una interacción eficiente, efectiva y segura                          del sistema con los que el usuario entra en contacto físicamente,
                                                                                           perceptivamente o conceptualmente. Los aspectos del sistema que
         Los usuarios no han de cambiar radicalmente su manera de ser, sino que            están escondidos para el usuario se denominan implementación»
         los sistemas han de ser diseñados para satisfacer los requisitos del              (MORAN, 1981)
         usuario




Diaz Muñante Jorge                                                                                                                                                 6
Diseño de Interfaces de Usuarios




        interfaz
        Objetos de la vida cotidiana
                                                     IU a la fama o la vergüenza ?




                                                                   ¿Como se abre la puerta?




        IU a la fama o la vergüenza ?                Usar un aviso ¡¡¡¡




                          ¿Como se abre la puerta?




        No requiere instrucciones ¡¡¡¡               Otra IU mal diseñada




Diaz Muñante Jorge                                                                            7
Diseño de Interfaces de Usuarios




        ¿Por que estudiar DIU?                                                              Implicancias en los negocios

           La mayoría de los sistemas informáticos son interactivos
           La interfaz es una parte muy importante del éxito o fracaso de una                Competencia intensa
           aplicación                                                                        – Everyone vs Microsoft.
           Algunos estudios:
                                                                                             Problemas de derecho de autor
           • Un 48% del código de una aplicación está dedicado a la interfaz (Myers,
             1992)                                                                           – Apple vs Microsoft (Windows)
           • Más del 70% del esfuerzo de desarrollo de las aplicaciones interactivas está    Union
             dedicado a la interfaz (Gartner Group)
           • El 80% de los costos de mantenimiento de un sistema interactivo son
                                                                                             – Bell Atlantic y Nynex
             debidos a problemas del usuario con el sistema y no a bugs. De estos            Compra de coorporacion
             problemas, el 64% son problemas de usabilidad (Pressman, 1992)

         – Las computadoras cada vez son más usados por gente menos                          – IBM compro Lotus
           preparada
                                                                                             Historias satisfactorias
         – Los recursos y conocimientos necesarios para el diseño y desarrollo de
           interfaces son cada vez mayores
                                                                                             – Netscape, America Online




        IU a la vergüenza                                                                   Usabilidad


         American Airlines vuelo 965. Se estrello y murieron todos tus                       Usabilidad es la eficacia, eficiencia y satisfacción con las que los usuarios
         pasajeros                                                                           pueden llevar a cabo tareas específicas en un contexto determinado
                                                                                             (ISO, 1993).
         El piloto cuando se aproxima al aeropuerto de ROZO, tipea la
                                                                                             – Eficacia es la realización de los objetivos por parte del usuario
         letra “R” y el sistema completo con el aeropuerto de                                  completamente y con exactitud.
         “ROMEO”
                                                                                             – Eficiencia es realización de los objetivos completamente y con
         El piloto automatico lo guio a una altura equivocada                                  exactitud en relación con los recursos utilizados (utilizar los recursos de
                                                                                               forma óptima).
                                                                                             – Satisfacción es el confort y la aceptación de uso del sistema.
                                                             ¿es culpa del piloto?           Para conseguirla es necesario aplicar los siguientes principios generales:
                                                                                             – Facilidad de aprendizaje.
                                                                                             – Flexibilidad.
                                                                                             – Solidez.




        Usabilidad : Facilidad de aprendizaje                                               Usabilidad: Facilidad de aprendizaje

         Tiene como objetivo reducir el esfuerzo que tiene que hacer
         un usuario novel para trabajar con un sistema interactivo y
         pasar a ser un usuario experto.
         Principios que afectan a la facilidad de aprendizaje.
         – Predicción. Permitir que el usuario determine el efecto de
           una acción futura basándose en interacciones anteriores.


         – Síntesis. Permite que un cambio del estado del sistema
           sea percibido por el usuario.
           • Inmediata. La notificación se muestra sin que el usuario lo solicite.
           • Eventual. La notificación se muestra a solicitud del usuario.




Diaz Muñante Jorge                                                                                                                                                           8
Diseño de Interfaces de Usuarios




        Usabilidad: Facilidad de aprendizaje                                           Un caso de extrema inconsistencia
         Principios que afectan a la facilidad de aprendizaje.
         – Familiaridad. La correlación entre los conocimientos del usuario y los
           conocimientos requeridos para el manejo del sistema.
           • Conocimientos de otros sistemas informáticos.
                                                                                             (a) Telefono, control remoto        (b) calculadoras, teclado de PC
           • Conocimientos del mundo real.
         – Generalización. Permitir al usuario ampliar el conocimiento de una                        1    2 3                              7     8   9
           interacción específica dentro de la aplicación y entre otras aplicaciones                 4    5 6
           para situaciones similares.                                                                                                      4    5    6
         – Consistencia. Todos los mecanismos de interacción deben de ser                           7     8    9                            1    2 3
           utilizados de la misma manera.
                                                                                                          0                                 0
           • Las interfaces deben de estar estandarizadas.
           • Importancia de las guías de estilo




        Usabilidad : Flexibilidad                                                      Usabilidad: Flexibilidad


         Hace referencia a las distintas formas en que el                               Migración de tareas.
         usuario y el sistema intercambian información.                                 – Capacidad de transferir el control entre el usuario y el sistema.

         Iniciativa en el diálogo: el usuario debe llevar el                            – Tanto uno como otro han de poder pasar de una tarea a otra y
                                                                                          promocionarla (cambiar el control del usuario al sistema o viceversa).
         control del sistema.
                                                                                        Capacidad de sustitución.
         – Considerar al usuario como el actor principal de la
                                                                                        – Posibilidad de que los valores puedan ser sustituidos por valores
           interacción.                                                                   equivalentes (p.e. elegir colores por el nombre, por su valor
           • El usuario alguien inteligente capaz de llevar a cabo su tarea sin           hexadecimal o mediante una paleta de colores).
             interacciones cerradas.
                                                                                        Configurable.
         Multitarea.                                                                    – El usuario debe ser capaz de modificar el aspecto de la interfaz.
         – El usuario debe ser capaz de ejercer varias tareas al                          • En cuanto a preferencias en el diseño.
           mismo tiempo.
                                                                                          • En cuanto a opciones según el nivel de experiencia (p.e. la interfaz de Visual
                                                                                            Studio .NET).




        Usabilidad: Solidez                                                            Usabilidad: Solidez


         El sistema debe cumplir sus objetivos y permitir su                            Tiempo de respuesta.
         evaluación.                                                                    – Debe ser el menor posible.
         Capacidad de observación.                                                      – Es necesario informar al usuario de que el sistema ha
         – Permite al usuario evaluar el estado del sistema por medio                     recibido la petición y está realizando la tarea.
           de la representación percibida en la interfaz.                               Adecuación de tareas.
         Recuperabilidad.                                                               – Hace referencia al grado en que el sistema soporta todas
                                                                                          las tareas que el usuario desea hacer y la manera en que
         – El usuario debe poder recuperar el sistema a un estado                         las comprende.
           anterior después de percibir un error en la operación.
                                                                                        – El mensaje “esto será soportado en posteriores versiones”
         – “Principio de esfuerzo proporcionado”                                          es frustrante para el usuario.
           • Si un efecto es difícil de deshacer, también debe ser más difícil de
             llevar a cabo.




Diaz Muñante Jorge                                                                                                                                                           9
Diseño de Interfaces de Usuarios




                                                                                                      IHC es multidisciplinario
                                                                                                               Factores organizativos                                          Interfaz del usuario
                                                                                                                        Sociología                                                  Ciencias de la
                                                                                                                       Antropología                                                 computación
                                                                                                                        Etnografía

                                                                                                     Factores organizativos
                                                                                                     Factores cognitivos                                                                      Interfaz del usuario
                                                                                                                                                   Interacción                                  Diseño Grafico
                                                                                                              Psicología                             hombre                                     Ciencias de la
                                                                                                                                                  computadora                                    información



                                                                                                                                                                                     Biblioteca
                                                                                                                         Ergonomía                                                 Documentación


                                                                                                                 Factores del entorno,                                          Interfaz del usuario
                                                                                                                 Salud / Seguridad
                                                                                                                 Confort                    Fuente: Granollers, Lores, Cañas (2005) y Carreras (2007) y propio




        IHC es multidisciplinario                                                                     IHC es multidisciplinario

         Psicología.
                                                                                                        Ergonomía.
         – Estudia el comportamiento y los estados de la conciencia de un
           individuo.                                                                                   – Estudia las condiciones de adaptación recíproca de la persona con su actividad
                                                                                                          y las herramientas que utiliza.
         – En la IHC permite estudiar la forma en la que los individuos perciben
                                                                                                          •    Estudia las características físicas de la interacción: entorno de trabajo, condiciones
           los objetos y procesan la información que reciben.                                                  ambientales, características físicas de los mecanismos de interacción.
         – Permite evaluar y determinar el grado de satisfacción de las interfaces.                     – Permite estudiar:
         – Se utiliza en las fases de:                                                                    •    Organización de los controles y las pantallas.
                                                                                                          •    El uso de los colores.
           •   Análisis de requisitos.
                                                                                                          •    Aspectos de salud que afecten a la calidad de la interacción y a las restricciones de
               – Conocer el modelo mental de los individuos, es decir cómo perciben ellos la tarea
                                                                                                               los usuarios.
                 que se ha de realizar.
                                                                                                          •     El entorno físico de la interacción.
           • Diseño.
                                                                                                        – Se utiliza en las fases de:
               – Para plasmar ese modelo mental en el sistema, por ejemplo utilizando las
                 metáforas adecuadas                                                                      •    Análisis de requisitos, mediante el estudio del entorno de interacción.
                                                                                                          •    Diseño, para decidir la organización de los controles y las pantallas, colores, etc.
                                                                                                          •    Lanzamiento, para evaluar si se han cumplido las normas ergonómicas y adecuarse a
                                                                                                               los imprevistos.




Diaz Muñante Jorge                                                                                                                                                                                                   10
Diseño de Interfaces de Usuarios




        IHC es multidisciplinario                                                                                              IHC es multidisciplinario

         Ciencias de la computación.                                                                                            Diseño gráfico y Ciencias de la Información.
         – En los productos basados en software, dan las bases para la construcción                                             – El diseño gráfico creará objetos “bellos y útiles”. Concepción de un objeto
           material de la interfaz.                                                                                               destinado a su producción en serie.
         – En la IHC se utilizan distintos aspectos de la computación:                                                          – Las ciencias de la información permiten organizar el contenido visualmente
            •   Ingeniería de software.                                                                                           para que sea fácilmente asimilable (jerarquía, disposición, etc.).
                – Da las bases metodológicas y proporciona los procesos para construir el producto software.                    – Un buen diseño gráfico de pantallas, iconos, etc. conseguirá interfaces que no
                – Materializa las especificaciones técnicas y dan las pautas para la codificación de cada una de                  producirán un rechazo al usuario y facilitará el uso de los elementos, al tiempo
                  las partes.                                                                                                     que una buena organización jerárquica de los elementos facilitarán la
                – Se aplica en todas las fases del desarrollo.                                                                    interpretación de la información mostrada.
            •   Programación.                                                                                                   – El diseño gráfico y las ciencias de la información se utilizarán en el diseño de la
                – Normalmente, para la codificación de interfaces gráficas, orientada a objetos y guiada por                      información.
                  eventos.
                                                                                                                                – Se utiliza en las fases de:
                – Se aplica en las fases de diseño (creación de prototipos) e implementación.
            •   Inteligencia artificial.                                                                                          •   Diseño, al tener que proporcionar la visualización al usuario de los elementos
                                                                                                                                      propuestos para el diseño del sistema, establecer el aspecto de las metáforas
                –    Para el diseño de programas que simulen el comportamiento humano (tutoriales, sistemas
                                                                                                                                      utilizadas, el estilo gráfico de la aplicación, su consistencia con la imagen corporativa
                    expertos, interfaces guiadas por el habla…).
                                                                                                                                      de la empresa, etc.
                – Se utiliza en todas las fases siempre que el sistema requiera ese tipo de funcionalidad.




        IHC es multidisciplinario                                                                                              Roles en un IU
         Documentación.                                                                                                                                  Sistema Interactivo
         – Estudia los procesos informativos desde la producción de información, hasta que el
           usuario la convierte en conocimiento.
         – En IHC es especialmente importante desde la perspectiva de la Arquitectura de la                                                     Núcleo                Software       Look
           Información (AI):                                                                                                                   Funcional              de la IU       &Feel
           •    El estudio de la organización de la información con el objetivo de permitir al usuario encontrar su                                                                                              Operador
                vía de navegación hacia el conocimiento y la comprensión de la información (Richard Saul
                Wurman, 1975).
           •    La arquitectura de la información se encarga del...                                                                                                                                  Implem.
                –   El diseño estructural en entornos de información compartida.                                                                                                                     Herram.
                –   Organizar y rotular sitios web, intranets, comunidades en línea y software para promover la usabilidad y
                    encontrabilidad (findability).
                                                                                                                                  Requeri-
                    »   Capacidad de ser encontrado tanto por usuarios como por sistemas de información y facilidades de
                        navegación de la aplicación para encontrar la información                                                 mientos          Diseñador             Diseñador        Herram.
         – Se utiliza en las fases de:                                                                                                             NF                    software IU      Construcc.
           •    Análisis de requisitos para averiguar cuál será la estructura de la información que se deberá
                mostrar.
           •    Diseño, para desarrollar distintos aspectos de la interfaz (búsquedas, navegación, categorías de                                              Especif.
                ítems, etc.).                                                                                                                                 Tareas                                             Diseñador
                                                                                                                                          Diseñador
           •    Lanzamiento, para evaluar aquellos aspectos relacionados con la búsqueda de información,                                                                                                         IU
                clasificación, categorización, etc.).
                                                                                                                                          SI




        Roles en un IU                                                                                                         Roles en IU

         “Operador” / “usuario” / “usuario final”
           • Persona que utilizará el sistema interactivo.                                                                      “Diseñador del núcleo funcional” o “programador de la
                                                                                                                                aplicación”
         “Diseñador del sistema”
           • Desarrolla la arquitectura global de un SI                                                                           • Crea la estructura de software necesaria para implementar las tareas
                                                                                                                                    semánticas de la aplicación (no incluidas en la IU)
                – Especifica las tareas que serán efectuadas dentro de cada módulo

         “Diseñador de la interfaz a usuario”                                                                                   “Diseñador del software de la interfaz a usuario”
           • Define la IU con la cual interactuará el operador                                                                    • Diseña la estructura del software que implementará la interfaz
                – Utiliza la especificación de tareas                                                                               definida por el diseñador de la IU.
           • Necesita comprender:                                                                                               “Desarrollador de herramientas”
                – Tareas a ser resueltas
                                                                                                                                  • crea herramientas para la construcción de interfaces
                – Necesidades del operador
                – Costos y beneficios de las UI particulares                                                                    No todos los actores se encuentran presentes en el proceso
                    » En términos del operador y los costos de implementación y mantenimento                                    de desarrollo de un SI




Diaz Muñante Jorge                                                                                                                                                                                                                11
Diseño de Interfaces de Usuarios




        ¿por qué diseñadores IU?                                                 Ciclo de Diseño UI

         – Producen interfaces con menos errores
         – Interfaces permitiendo una ejecución más rápida                          Ciclo Iterativo

         – Los programadores no piensan de igual forma que los operadores                                  Diseño
           • Los programadores poseen un modelo del sistema, no un modelo del
             usuario
         – Diferentes clases de interfaces y problemas
                                                                                                            Interfaz           Prototipeo

         Pueden trabajar conjuntamente con:
         – Usuarios
         – Programadores                                                                    Evaluacion
         – Diseñadores del sistema
         – Especialistas en diseño gráfico, factores humanos, sicología, etc..




        ¿Cómo diseñar y contruir UI’s?                                           Análisis de tareas


         Ciclo de diseño                                                          Análisis
         – Análisis de tareas                                                     – Definir la tarea u objetivo del programa
                                                                                  – Elegir la plataforma y los mecanismos de interacción
         – Prototipeo rápido
                                                                                  – Caracterizar el usuario promedio
         – Evaluación
                                                                                  Diseño “Conceptual”
         – Iteración
                                                                                  – Definiciones y primeros bocetos
                                                                                  – Selección de metáforas




        Prototipeo rapido                                                        Evaluacion
          Estructurar un diseño en papel                                           Evaluación analítica
          – O mas ¡¡                                                               – Sin usuario
          Tecnicas de prototipos de baja                                           Pruebas con usuarios
          fidelidad
                                                                                   reales
          – Papel sketchs
                                                                                   Técnicas de bajo costos
          – Cortar, copiar y pegar
                                                                                   – Heurística
          Herramientas de prototipeos
                                                                                   – Recorrido cognitivo
          – Flash, Javascripts
          Estructuradores de IUS                                                   Alto costo
          – Interface Builder, Visual Studio,                                      – Pruebas de usabilidad en
            NetBeans                                                                 laboratorios




Diaz Muñante Jorge                                                                                                                          12
Diseño de Interfaces de Usuarios




        Origenes de la disciplina                                                                               Origenes de la disciplina

         La IPO nace de una rama de la psicología aplicada que estudia la forma de trabajar de las               Años 70
         personas:
         – Human factors (EEUU).                                                                                 – Computadoras manejados por personal especializado.
         – Ergonomía (Europa).
         Hacia los años 60 se comienza a tomar conciencia de los problemas que deberían                          – Prima la eficiencia del sistema más que el tiempo de aprendizaje.
         resolverse para facilitar la utilización de los ordenadores por parte de las personas.
         – Licklider (1960)
                                                                                                                 Años 90
           •   Crear un sistema de E/S para la comunicación utilizando gráficos y datos simbólicos.              – La popularización acerca a la población al uso del computador
           •   Desarrollar sistemas interactivos en tiempo real (se trabajaba en batch).
           •   Sistemas que faciliten la cooperación de las personas en el desarrollo de grandes sistemas.       – El computador no es una herramienta en si mismo, sino que se usa en
           •   Reconocimiento de voz y de la escritura manual.                                                     el trabajo diario.
           •   Comprensión del lenguaje natural.
         – ● Hansen (1971), primera enumeración de principios de diseño de sistemas interactivos.                – Es necesario dotar a los sistemas de mecanismos que faciliten la
           •   Conocer al usuario.                                                                                 relación con el usuario y mejoren la productividad.
           •   Minimizar la memorización, sustituyendo la entrada de datos por la selección de elementos.
           •   Optimizar las operaciones basándose en la observación del uso del sistema.
           •   Facilitar buenos mensajes de error, prevenir los errores (de entrada de datos), posibilitar la
               recuperación de errores (deshacer).




        Origenes de los sistemas de interaccion                                                                 GUIs de Escritorio

         Sistemas primitivos de interacción.
         – La entrada/salida se realizaba mediante cintas o tarjetas perforadas y
           teleimpresoras.
         – Sistemas de procesamiento por lotes.
         Años 60: sistemas de tiempo compartido mediante terminales en modo
         texto.
         – Interfaz de línea de órdenes.
         – Flexibles y veloces para usuarios avanzados.




        Aplicaciones webs                                                                                       Escritorio 3D




Diaz Muñante Jorge                                                                                                                                                                       13
Diseño de Interfaces de Usuarios




        Dispositivos móviles         IU basadas en el uso del lápiz




        IU en paredes                La interfaz del usuario
                                     * Para que una interfaz de usuario sea efectiva se
                                       debe sustentar sobre la idea de affordance.
                                      – Las cosas deben sugerir por su forma u otros
                                        atributos qué se puede hacer con ellas.
                                      Para ello se debe centrar en dos conceptos:
                                      – Visibilidad. El objeto debe ser visible para el
                                        usuario de forma que se pueda interactuar
                                        fácilmente con él.
                                      – Evidencia. La funcionalidad del objeto y su
                                        modo de uso deben ser evidentes.




        Visibilidad / Evidencia ..   Ergonomia


                                       Estudia las características físicas de la interacción: entorno
                                       de trabajo, condiciones ambientales, características físicas
                                       de los mecanismos de interacción.
                                       Permite estudiar.
                                       – Organización de los controles y las pantallas.
                                       – agrupación funcional. Se agrupan controles
                                         funcionalmente relacionados.
                                       – Agrupación secuencial. Se agrupan los controles
                                         reflejando el orden de uso en una interacción típica.
                                       – Por frecuencia. Se agrupan los controles por la frecuencia
                                         de uso. Los más utilizados deben ser los más fácilmente
                                         accesibles.




Diaz Muñante Jorge                                                                                      14
Diseño de Interfaces de Usuarios




        Ergonomía                                                                        Ergonomia ..


                                                                                          Permite estudiar también:
                                                                                          – Aspectos de salud que afecten a la calidad de la
                                                                                            interacción y a las restricciones de los usuarios.
                                                                                          – El entorno físico de la interacción.
                                                                                          – El uso de los colores.
                                                                                            • Tan diferentes como sea posible.
                                                                                            • Fácilmente distinguibles al margen de la luz ambiental o los defectos
                                                                                              visuales del usuario.




        Comentarios en contra de la usabilidad                                           Conclusiones


         Los usuarios no necesitan mejores interfaces sino un entrenamiento               La IHC es una disciplina bien asentada
         mejor.
         La usabilidad es subjetiva —no se puede medir.                                   La interfaz es un concepto amplio y en la que hay
                                                                                          que tener en cuenta todo el entorno
         El diseño de la interfaz de usuario está implícito en el diseño del software.
         No se tiene que planificar expresamente y valorar su coste.                      Acceso para todos
         Si el diseñador esta familiarizado con guías de estilo y principios de
         diseño, se harán buenas interfaces.                                              La usabilidad como objetivo fundamental
         El diseño de la interfaz de usuario no es necesario hasta el diseño              La interdisciplinariedad de la IHC
         detallado.
                                                                                          Diseño centrado en el usuario
         La usabilidad aumenta los costes de desarrollo y el tamaño del ciclo de
         desarrollo.




Diaz Muñante Jorge                                                                                                                                                    15

Weitere ähnliche Inhalte

Ähnlich wie C1 introduccion diu_sm_2012_1_mododecompatibilidad_

C2 centrado usuario_diu_mododecompatibilidad_2012_1
C2 centrado usuario_diu_mododecompatibilidad_2012_1C2 centrado usuario_diu_mododecompatibilidad_2012_1
C2 centrado usuario_diu_mododecompatibilidad_2012_1Julio Pari
 
SOFTWARE EDUCATIVO
SOFTWARE EDUCATIVOSOFTWARE EDUCATIVO
SOFTWARE EDUCATIVOFanny-pas
 
Facilitacion entornos virtuales
Facilitacion entornos virtualesFacilitacion entornos virtuales
Facilitacion entornos virtualesRemei Camps
 
Software educativo
Software educativoSoftware educativo
Software educativobarcemil
 
Software educativo
Software educativoSoftware educativo
Software educativobarcemil
 
Software educativo
Software educativoSoftware educativo
Software educativobarcemil
 
Software educativo
Software educativoSoftware educativo
Software educativobarcemil
 
Exposicion tecnol ysleyer
Exposicion tecnol ysleyerExposicion tecnol ysleyer
Exposicion tecnol ysleyerysle_03
 
Wynn computer equipment
Wynn computer equipmentWynn computer equipment
Wynn computer equipmentAGUSTINZRT
 
Formato estándar de secuencia didáctica soft aplic-ejec
Formato estándar de secuencia didáctica soft aplic-ejecFormato estándar de secuencia didáctica soft aplic-ejec
Formato estándar de secuencia didáctica soft aplic-ejeckendkokin
 
Comunidades de Práctica en el entorno sanitario
Comunidades de Práctica en el entorno sanitarioComunidades de Práctica en el entorno sanitario
Comunidades de Práctica en el entorno sanitarioFrancesca Cañas
 
Prototipo virtual Jacqueline Curso Atenci{on a Usuarios en Bibliotecas
Prototipo virtual Jacqueline Curso Atenci{on a Usuarios en Bibliotecas Prototipo virtual Jacqueline Curso Atenci{on a Usuarios en Bibliotecas
Prototipo virtual Jacqueline Curso Atenci{on a Usuarios en Bibliotecas Jakiana
 
Prototipo virtual jacqueline sead
Prototipo virtual jacqueline seadPrototipo virtual jacqueline sead
Prototipo virtual jacqueline seadJakiana
 
Prototipo virtual jacqueline sead
Prototipo virtual jacqueline seadPrototipo virtual jacqueline sead
Prototipo virtual jacqueline seadJakiana
 
Prototipo virtual jacqueline sead
Prototipo virtual jacqueline seadPrototipo virtual jacqueline sead
Prototipo virtual jacqueline seadJakiana
 
Prototipo virtual jacqueline sead
Prototipo virtual jacqueline seadPrototipo virtual jacqueline sead
Prototipo virtual jacqueline seadJakiana
 
Prototipo virtual Atención a usuarios en Bibliotecas
Prototipo virtual Atención a usuarios en Bibliotecas Prototipo virtual Atención a usuarios en Bibliotecas
Prototipo virtual Atención a usuarios en Bibliotecas Jakiana
 

Ähnlich wie C1 introduccion diu_sm_2012_1_mododecompatibilidad_ (20)

C2 centrado usuario_diu_mododecompatibilidad_2012_1
C2 centrado usuario_diu_mododecompatibilidad_2012_1C2 centrado usuario_diu_mododecompatibilidad_2012_1
C2 centrado usuario_diu_mododecompatibilidad_2012_1
 
SOFTWARE EDUCATIVO
SOFTWARE EDUCATIVOSOFTWARE EDUCATIVO
SOFTWARE EDUCATIVO
 
Facilitacion entornos virtuales
Facilitacion entornos virtualesFacilitacion entornos virtuales
Facilitacion entornos virtuales
 
cuestionario ava ova
cuestionario ava ovacuestionario ava ova
cuestionario ava ova
 
Software educativo
Software educativoSoftware educativo
Software educativo
 
Software educativo
Software educativoSoftware educativo
Software educativo
 
Software educativo
Software educativoSoftware educativo
Software educativo
 
Software educativo
Software educativoSoftware educativo
Software educativo
 
Exposicion tecnol ysleyer
Exposicion tecnol ysleyerExposicion tecnol ysleyer
Exposicion tecnol ysleyer
 
Informatica - Openoffice 2007- impress
Informatica - Openoffice 2007- impressInformatica - Openoffice 2007- impress
Informatica - Openoffice 2007- impress
 
Analisis Recursos
Analisis RecursosAnalisis Recursos
Analisis Recursos
 
Wynn computer equipment
Wynn computer equipmentWynn computer equipment
Wynn computer equipment
 
Formato estándar de secuencia didáctica soft aplic-ejec
Formato estándar de secuencia didáctica soft aplic-ejecFormato estándar de secuencia didáctica soft aplic-ejec
Formato estándar de secuencia didáctica soft aplic-ejec
 
Comunidades de Práctica en el entorno sanitario
Comunidades de Práctica en el entorno sanitarioComunidades de Práctica en el entorno sanitario
Comunidades de Práctica en el entorno sanitario
 
Prototipo virtual Jacqueline Curso Atenci{on a Usuarios en Bibliotecas
Prototipo virtual Jacqueline Curso Atenci{on a Usuarios en Bibliotecas Prototipo virtual Jacqueline Curso Atenci{on a Usuarios en Bibliotecas
Prototipo virtual Jacqueline Curso Atenci{on a Usuarios en Bibliotecas
 
Prototipo virtual jacqueline sead
Prototipo virtual jacqueline seadPrototipo virtual jacqueline sead
Prototipo virtual jacqueline sead
 
Prototipo virtual jacqueline sead
Prototipo virtual jacqueline seadPrototipo virtual jacqueline sead
Prototipo virtual jacqueline sead
 
Prototipo virtual jacqueline sead
Prototipo virtual jacqueline seadPrototipo virtual jacqueline sead
Prototipo virtual jacqueline sead
 
Prototipo virtual jacqueline sead
Prototipo virtual jacqueline seadPrototipo virtual jacqueline sead
Prototipo virtual jacqueline sead
 
Prototipo virtual Atención a usuarios en Bibliotecas
Prototipo virtual Atención a usuarios en Bibliotecas Prototipo virtual Atención a usuarios en Bibliotecas
Prototipo virtual Atención a usuarios en Bibliotecas
 

Mehr von Julio Pari

Evento - Virtual Lab Despliegue de aplicaciones en Kubernetes #Ibm virtual la...
Evento - Virtual Lab Despliegue de aplicaciones en Kubernetes #Ibm virtual la...Evento - Virtual Lab Despliegue de aplicaciones en Kubernetes #Ibm virtual la...
Evento - Virtual Lab Despliegue de aplicaciones en Kubernetes #Ibm virtual la...Julio Pari
 
Links kubernetes - Evento - Virtual Lab Despliegue de aplicaciones en Kubernetes
Links kubernetes - Evento - Virtual Lab Despliegue de aplicaciones en KubernetesLinks kubernetes - Evento - Virtual Lab Despliegue de aplicaciones en Kubernetes
Links kubernetes - Evento - Virtual Lab Despliegue de aplicaciones en KubernetesJulio Pari
 
Comandos - Evento - Virtual Lab Despliegue de aplicaciones en Kubernetes
Comandos - Evento - Virtual Lab Despliegue de aplicaciones en KubernetesComandos - Evento - Virtual Lab Despliegue de aplicaciones en Kubernetes
Comandos - Evento - Virtual Lab Despliegue de aplicaciones en KubernetesJulio Pari
 
Indice General Tesis Sistemas UPC
Indice General Tesis Sistemas UPCIndice General Tesis Sistemas UPC
Indice General Tesis Sistemas UPCJulio Pari
 
Arquitectura Web FISI UNMSM
Arquitectura Web FISI UNMSMArquitectura Web FISI UNMSM
Arquitectura Web FISI UNMSMJulio Pari
 
Jelastic Enterprise
Jelastic EnterpriseJelastic Enterprise
Jelastic EnterpriseJulio Pari
 
Marketing Examen Parcial Profesor Osorio
Marketing Examen Parcial Profesor OsorioMarketing Examen Parcial Profesor Osorio
Marketing Examen Parcial Profesor OsorioJulio Pari
 
Ingenieria Software Examen Parcial 2013 2 Profesor Cordero
Ingenieria Software Examen Parcial 2013 2 Profesor CorderoIngenieria Software Examen Parcial 2013 2 Profesor Cordero
Ingenieria Software Examen Parcial 2013 2 Profesor CorderoJulio Pari
 
Documento de Arquitectura
Documento de ArquitecturaDocumento de Arquitectura
Documento de ArquitecturaJulio Pari
 
Solucion Examen Parcial Sistemas Digitales UNMSM FISI
Solucion Examen Parcial Sistemas Digitales UNMSM FISISolucion Examen Parcial Sistemas Digitales UNMSM FISI
Solucion Examen Parcial Sistemas Digitales UNMSM FISIJulio Pari
 
Práctica de Inventarios - Investigación Operativa II
Práctica de Inventarios - Investigación Operativa IIPráctica de Inventarios - Investigación Operativa II
Práctica de Inventarios - Investigación Operativa IIJulio Pari
 
Armas silenciosas para guerras tranquilas
Armas silenciosas para guerras tranquilasArmas silenciosas para guerras tranquilas
Armas silenciosas para guerras tranquilasJulio Pari
 
Formato de presentación de Proyecto UNMSM FISI
Formato de presentación de Proyecto UNMSM FISIFormato de presentación de Proyecto UNMSM FISI
Formato de presentación de Proyecto UNMSM FISIJulio Pari
 
Cuento para nuestro hijo y nuestra hija
Cuento para nuestro hijo y nuestra hijaCuento para nuestro hijo y nuestra hija
Cuento para nuestro hijo y nuestra hijaJulio Pari
 
Ingeniería de Software Examen Parcial
Ingeniería de Software Examen ParcialIngeniería de Software Examen Parcial
Ingeniería de Software Examen ParcialJulio Pari
 
Sistemas Distribuidos Examen Parcial
Sistemas Distribuidos Examen ParcialSistemas Distribuidos Examen Parcial
Sistemas Distribuidos Examen ParcialJulio Pari
 
Php07 consultas bd
Php07 consultas bdPhp07 consultas bd
Php07 consultas bdJulio Pari
 
Php06 instalacion my_sql
Php06 instalacion my_sqlPhp06 instalacion my_sql
Php06 instalacion my_sqlJulio Pari
 
Php05 funciones usuario
Php05 funciones usuarioPhp05 funciones usuario
Php05 funciones usuarioJulio Pari
 

Mehr von Julio Pari (20)

Evento - Virtual Lab Despliegue de aplicaciones en Kubernetes #Ibm virtual la...
Evento - Virtual Lab Despliegue de aplicaciones en Kubernetes #Ibm virtual la...Evento - Virtual Lab Despliegue de aplicaciones en Kubernetes #Ibm virtual la...
Evento - Virtual Lab Despliegue de aplicaciones en Kubernetes #Ibm virtual la...
 
Links kubernetes - Evento - Virtual Lab Despliegue de aplicaciones en Kubernetes
Links kubernetes - Evento - Virtual Lab Despliegue de aplicaciones en KubernetesLinks kubernetes - Evento - Virtual Lab Despliegue de aplicaciones en Kubernetes
Links kubernetes - Evento - Virtual Lab Despliegue de aplicaciones en Kubernetes
 
Comandos - Evento - Virtual Lab Despliegue de aplicaciones en Kubernetes
Comandos - Evento - Virtual Lab Despliegue de aplicaciones en KubernetesComandos - Evento - Virtual Lab Despliegue de aplicaciones en Kubernetes
Comandos - Evento - Virtual Lab Despliegue de aplicaciones en Kubernetes
 
Indice General Tesis Sistemas UPC
Indice General Tesis Sistemas UPCIndice General Tesis Sistemas UPC
Indice General Tesis Sistemas UPC
 
Arquitectura Web FISI UNMSM
Arquitectura Web FISI UNMSMArquitectura Web FISI UNMSM
Arquitectura Web FISI UNMSM
 
Jelastic Enterprise
Jelastic EnterpriseJelastic Enterprise
Jelastic Enterprise
 
Marketing Examen Parcial Profesor Osorio
Marketing Examen Parcial Profesor OsorioMarketing Examen Parcial Profesor Osorio
Marketing Examen Parcial Profesor Osorio
 
Ingenieria Software Examen Parcial 2013 2 Profesor Cordero
Ingenieria Software Examen Parcial 2013 2 Profesor CorderoIngenieria Software Examen Parcial 2013 2 Profesor Cordero
Ingenieria Software Examen Parcial 2013 2 Profesor Cordero
 
Documento de Arquitectura
Documento de ArquitecturaDocumento de Arquitectura
Documento de Arquitectura
 
Solucion Examen Parcial Sistemas Digitales UNMSM FISI
Solucion Examen Parcial Sistemas Digitales UNMSM FISISolucion Examen Parcial Sistemas Digitales UNMSM FISI
Solucion Examen Parcial Sistemas Digitales UNMSM FISI
 
Práctica de Inventarios - Investigación Operativa II
Práctica de Inventarios - Investigación Operativa IIPráctica de Inventarios - Investigación Operativa II
Práctica de Inventarios - Investigación Operativa II
 
Armas silenciosas para guerras tranquilas
Armas silenciosas para guerras tranquilasArmas silenciosas para guerras tranquilas
Armas silenciosas para guerras tranquilas
 
UML Java
UML JavaUML Java
UML Java
 
Formato de presentación de Proyecto UNMSM FISI
Formato de presentación de Proyecto UNMSM FISIFormato de presentación de Proyecto UNMSM FISI
Formato de presentación de Proyecto UNMSM FISI
 
Cuento para nuestro hijo y nuestra hija
Cuento para nuestro hijo y nuestra hijaCuento para nuestro hijo y nuestra hija
Cuento para nuestro hijo y nuestra hija
 
Ingeniería de Software Examen Parcial
Ingeniería de Software Examen ParcialIngeniería de Software Examen Parcial
Ingeniería de Software Examen Parcial
 
Sistemas Distribuidos Examen Parcial
Sistemas Distribuidos Examen ParcialSistemas Distribuidos Examen Parcial
Sistemas Distribuidos Examen Parcial
 
Php07 consultas bd
Php07 consultas bdPhp07 consultas bd
Php07 consultas bd
 
Php06 instalacion my_sql
Php06 instalacion my_sqlPhp06 instalacion my_sql
Php06 instalacion my_sql
 
Php05 funciones usuario
Php05 funciones usuarioPhp05 funciones usuario
Php05 funciones usuario
 

C1 introduccion diu_sm_2012_1_mododecompatibilidad_

  • 1. Diseño de Interfaces de Usuarios Contenido 1 Click to add Title Introduccion Diseño de Interfaces Profesor: de Usuarios 2 Click to add Title Objetivos Diaz Muñante Jorge Ciclo 2012-1 1 3 Click to add Title Planificacion 1 4 Material de clases Click to add Title Introducción al curso 2 5 Click to add Title Evaluacion 1 6 Recomendaciones Click to add Title Introducción Objetivo del curso Presentación – Aprender a diseñar, prototipear y evaluar inferfaces • Descubrir las tareas del usuario ¿qué esperan del curso? • Limitaciones cognitivas / perceptual que afectan el diseño de las interfaces Objetivos del curso • Técnicas de evaluación de interfaces • Importancia del diseño interactivo para su usabilidad • Tecnologías para crear propotipos e implementar interfaces • Como trabajar en equipo de trabajo • Comunicar el resultado del proyecto – Muchos de estos aspectos forman parte de los trabajos del futuro Advertencia Planificación Bits Interfaz Usuario Bien escrito La interacción persona-computadora – Español • Singular interfaz • Plural interfaces – Ingles • Singular interface • Plural interfaces – Latín - inter (entre) - face (cara) Mal escrito – interfases (significa transición) Diaz Muñante Jorge 1
  • 2. Diseño de Interfaces de Usuarios Planificación Planificación La interacción persona-computadora La interacción persona-computadora Diseño centrado en el usuario Diseño centrado en el usuario Análisis de tareas Secuencia de Tareas Selección de Tareas * Iteración de Tareas Tarea Unitaria Planificación Planificación La interacción persona-computadora La interacción persona-computadora Diseño centrado en el usuario Diseño centrado en el usuario Análisis de tareas Análisis de tareas Prototipo Prototipo El factor humano Planificación Planificación La interacción persona-computadora La interacción persona-computadora Diseño centrado en el usuario Diseño centrado en el usuario Análisis de tareas Análisis de tareas Prototipo Prototipo El factor humano El factor humano Recomendaciones Recomendaciones Metáforas Diaz Muñante Jorge 2
  • 3. Diseño de Interfaces de Usuarios Planificación Planificación La interacción persona-computadora La interacción persona-computadora Diseño centrado en el usuario Diseño centrado en el usuario Análisis de tareas Análisis de tareas Prototipo Prototipo El factor humano El factor humano Recomendaciones Recomendaciones Metáforas Metáforas Estándares y guías Estándares y guías Errores y ayuda Planificación Planificación La interacción persona-computadora La interacción persona-computadora Diseño centrado en el usuario Diseño centrado en el usuario Análisis de tareas Análisis de tareas Prototipo Prototipo El factor humano El factor humano Recomendaciones Recomendaciones Metáforas Metáforas Estándares y guías Estándares y guías Errores y ayuda Errores y ayuda Estilos de interacción Estilos de interacción Accesabilidad Planificación Planificación La interacción persona-computadora La interacción persona-computadora Diseño centrado en el usuario Diseño centrado en el usuario Análisis de tareas Análisis de tareas Prototipo Prototipo El factor humano El factor humano Recomendaciones Recomendaciones Metáforas Metáforas Estándares y guías Estándares y guías Errores y ayuda Errores y ayuda Estilos de interacción Estilos de interacción Accesabilidad Accesabilidad Internacionalización Internacionalización Evaluación Diaz Muñante Jorge 3
  • 4. Diseño de Interfaces de Usuarios Planificación Planificacion por semanas La interacción persona-computadora Diseño centrado en el usuario L M M J V S D Sem Tema PPT Análisis de tareas 26 27 28 29 30 31 1 Mar 1 Introduccion C1_introduccion 2 3 4 5 6 7 8 Abr 2 Diseño centrado usuario C2_centrado_usuario Prototipo 9 10 11 12 13 14 15 3 Prototipos C4_prototipos 16 17 18 19 20 21 22 4 Factores Humanos C4_factores_humanos El factor humano 23 24 25 26 27 28 29 5 Factores Humanos. Trab # 1 C4_factores_humanos Recomendaciones 30 1 2 3 4 5 6 May 6 Recomendación diseño C7_recomendaciones 7 8 9 10 11 12 13 7 Recomendación diseño C7_recomendaciones Metáforas 14 15 16 17 18 19 20 8 Examen Parcial 21 22 23 24 25 26 27 9 Errores y Ayudas C8_errores_ayudas Estándares y guías 28 29 30 31 1 2 3 Jun 10 Errores y Ayudas C8_errores_ayudas 4 5 6 7 8 9 10 11 Metodos de evaluacion. C11_evaluacion Errores y ayuda 11 12 13 14 15 16 17 12 Met. de evaluacion. Trab #2 C11_evaluacion Estilos de interacción 18 19 20 21 22 23 24 13 Internacionalizacion C10_internacionalizacion 25 26 27 28 29 30 1 Jul 14 Diseño de web C12_diseño_webs Accesabilidad 2 3 4 5 6 7 8 15 Patrones de HP Web C12_patrones_webs 9 10 11 12 13 14 15 16 Examen Final Internacionalización 16 17 18 19 20 21 22 17 Examen Sustitutorio Evaluación Diseño Webs Material de apoyo Material electronico en campus.dokeos.com – Registrar en Dokeos – Registrar en el curso • El registro es el curso virtual de teoria y de laboratorio. tlozano •Ingresa a tu cuenta •Ingresa a la opción “ordenar mis cursos” Diaz Muñante Jorge 4
  • 5. Diseño de Interfaces de Usuarios Pagina de DIU - Dokeos Bibliografía Evaluación Evaluación Porcentaje Termino Fecha Examen 15 % EP Semana 8 Shneiderman, Ben, C. Plaisant Parcial Diseño de interfaces de usuario, 4ª Edición Pearson, 2006 Examen Final 35 % EF Semana 16 Trabajo 15 % TP1, TP2 TP1 = Sem 5 practico (27 abr) TP2 = Sem 12 (15 jun) Laboratorio 35 % L2*0.1+ Por especificar L3*0.1+ en laboratorio L4*0.15+ L5*0.15+ Norman, Donald L6*0.15+ The invisible computer L7*0.35 MIT Press, 1998 Aula virtual – link al libro en español (Dokeos) Nuevo Trabajos Practicos Rol de Exposiciones Práctica (Trabajos) 15% 2 Trabajos prácticos (TP1, TP2) 7.5 % cada uno Trabajo Practico # 1 Fecha entrega: 27 abril Conformar grupo de 3 alumnos. Cada grupo interpretara y analizara recomendaciones en el buen diseño de G #1 G # 3 G # 5 G # 7 G # 9 G # 11 las interfaces de Microsoft, para la cual se le asignara un tema donde encontrara una categoría y tema especifico (Cada grupo tendrá un tema diferente) Los trabajos se realizaran en base al archivo UXguide.pdf Trabajo # 1. Fecha: 27 de abril Trabajo Practico # 2 Trabajo # 2 Fecha entrega: 15 junio Fecha: 15 de junio Cada grupo entregara ambos trabajos, pero lo sustentara en una fecha. (Se G # 2 G # 4 G # 6 G # 8 G # 10 G # 12 sorteara la próxima semana) Diaz Muñante Jorge 5
  • 6. Diseño de Interfaces de Usuarios Evaluación Interacción Hombre-Computador (IHC, HCI ingles) Sustitutorio Hombre – Usuario final de un programa – Reemplaza el promedio de E1 y E2 – otras personas de la organización – Son By four – A puro dolor Computador – Grupo Kaliente - Iquitos • Solo me queda llorar... resignado a perderte... Solo me queda llorar... – La máquina donde se ejecuta el programa dolido y vació … Interacción – Maelo Ruiz – Te va a doler – el usuario le ordena al computador que debe hacer • Pero te vas arrepentir la vida entera – el computador comunica el resultado al usuario. No se limita a la situación clásica de una persona sentada delante de un terminal – Las computadoras se encuentran en muchas formas Interacción al tacto Objetivo del IHC Tipos de interfaz Objetivo: – Desarrollar o mejorar la seguridad, utilidad, efectividad, eficiencia y usabilidad de sistemas que incluyan computadoras Para hacer sistemas usables es preciso – Comprender los factores (psicológicos, ergonómicos, organizativos y sociales) que determinan cómo la gente trabaja y hace uso de las Interfaz: «conexión física y funcional entre dos aparatos o sistemas independientes» (DRAE, 22ª edición). computadoras Interfaz de usuario: «Dónde las personas y los bits se encuentan» – Desarrollar herramientas y técnicas para ayudar a los diseñadores de (Negroponte, 1995). sistemas interactivos – «La interfaz de usuario de un sistema consiste de aquellos aspectos – Conseguir una interacción eficiente, efectiva y segura del sistema con los que el usuario entra en contacto físicamente, perceptivamente o conceptualmente. Los aspectos del sistema que Los usuarios no han de cambiar radicalmente su manera de ser, sino que están escondidos para el usuario se denominan implementación» los sistemas han de ser diseñados para satisfacer los requisitos del (MORAN, 1981) usuario Diaz Muñante Jorge 6
  • 7. Diseño de Interfaces de Usuarios interfaz Objetos de la vida cotidiana IU a la fama o la vergüenza ? ¿Como se abre la puerta? IU a la fama o la vergüenza ? Usar un aviso ¡¡¡¡ ¿Como se abre la puerta? No requiere instrucciones ¡¡¡¡ Otra IU mal diseñada Diaz Muñante Jorge 7
  • 8. Diseño de Interfaces de Usuarios ¿Por que estudiar DIU? Implicancias en los negocios La mayoría de los sistemas informáticos son interactivos La interfaz es una parte muy importante del éxito o fracaso de una Competencia intensa aplicación – Everyone vs Microsoft. Algunos estudios: Problemas de derecho de autor • Un 48% del código de una aplicación está dedicado a la interfaz (Myers, 1992) – Apple vs Microsoft (Windows) • Más del 70% del esfuerzo de desarrollo de las aplicaciones interactivas está Union dedicado a la interfaz (Gartner Group) • El 80% de los costos de mantenimiento de un sistema interactivo son – Bell Atlantic y Nynex debidos a problemas del usuario con el sistema y no a bugs. De estos Compra de coorporacion problemas, el 64% son problemas de usabilidad (Pressman, 1992) – Las computadoras cada vez son más usados por gente menos – IBM compro Lotus preparada Historias satisfactorias – Los recursos y conocimientos necesarios para el diseño y desarrollo de interfaces son cada vez mayores – Netscape, America Online IU a la vergüenza Usabilidad American Airlines vuelo 965. Se estrello y murieron todos tus Usabilidad es la eficacia, eficiencia y satisfacción con las que los usuarios pasajeros pueden llevar a cabo tareas específicas en un contexto determinado (ISO, 1993). El piloto cuando se aproxima al aeropuerto de ROZO, tipea la – Eficacia es la realización de los objetivos por parte del usuario letra “R” y el sistema completo con el aeropuerto de completamente y con exactitud. “ROMEO” – Eficiencia es realización de los objetivos completamente y con El piloto automatico lo guio a una altura equivocada exactitud en relación con los recursos utilizados (utilizar los recursos de forma óptima). – Satisfacción es el confort y la aceptación de uso del sistema. ¿es culpa del piloto? Para conseguirla es necesario aplicar los siguientes principios generales: – Facilidad de aprendizaje. – Flexibilidad. – Solidez. Usabilidad : Facilidad de aprendizaje Usabilidad: Facilidad de aprendizaje Tiene como objetivo reducir el esfuerzo que tiene que hacer un usuario novel para trabajar con un sistema interactivo y pasar a ser un usuario experto. Principios que afectan a la facilidad de aprendizaje. – Predicción. Permitir que el usuario determine el efecto de una acción futura basándose en interacciones anteriores. – Síntesis. Permite que un cambio del estado del sistema sea percibido por el usuario. • Inmediata. La notificación se muestra sin que el usuario lo solicite. • Eventual. La notificación se muestra a solicitud del usuario. Diaz Muñante Jorge 8
  • 9. Diseño de Interfaces de Usuarios Usabilidad: Facilidad de aprendizaje Un caso de extrema inconsistencia Principios que afectan a la facilidad de aprendizaje. – Familiaridad. La correlación entre los conocimientos del usuario y los conocimientos requeridos para el manejo del sistema. • Conocimientos de otros sistemas informáticos. (a) Telefono, control remoto (b) calculadoras, teclado de PC • Conocimientos del mundo real. – Generalización. Permitir al usuario ampliar el conocimiento de una 1 2 3 7 8 9 interacción específica dentro de la aplicación y entre otras aplicaciones 4 5 6 para situaciones similares. 4 5 6 – Consistencia. Todos los mecanismos de interacción deben de ser 7 8 9 1 2 3 utilizados de la misma manera. 0 0 • Las interfaces deben de estar estandarizadas. • Importancia de las guías de estilo Usabilidad : Flexibilidad Usabilidad: Flexibilidad Hace referencia a las distintas formas en que el Migración de tareas. usuario y el sistema intercambian información. – Capacidad de transferir el control entre el usuario y el sistema. Iniciativa en el diálogo: el usuario debe llevar el – Tanto uno como otro han de poder pasar de una tarea a otra y promocionarla (cambiar el control del usuario al sistema o viceversa). control del sistema. Capacidad de sustitución. – Considerar al usuario como el actor principal de la – Posibilidad de que los valores puedan ser sustituidos por valores interacción. equivalentes (p.e. elegir colores por el nombre, por su valor • El usuario alguien inteligente capaz de llevar a cabo su tarea sin hexadecimal o mediante una paleta de colores). interacciones cerradas. Configurable. Multitarea. – El usuario debe ser capaz de modificar el aspecto de la interfaz. – El usuario debe ser capaz de ejercer varias tareas al • En cuanto a preferencias en el diseño. mismo tiempo. • En cuanto a opciones según el nivel de experiencia (p.e. la interfaz de Visual Studio .NET). Usabilidad: Solidez Usabilidad: Solidez El sistema debe cumplir sus objetivos y permitir su Tiempo de respuesta. evaluación. – Debe ser el menor posible. Capacidad de observación. – Es necesario informar al usuario de que el sistema ha – Permite al usuario evaluar el estado del sistema por medio recibido la petición y está realizando la tarea. de la representación percibida en la interfaz. Adecuación de tareas. Recuperabilidad. – Hace referencia al grado en que el sistema soporta todas las tareas que el usuario desea hacer y la manera en que – El usuario debe poder recuperar el sistema a un estado las comprende. anterior después de percibir un error en la operación. – El mensaje “esto será soportado en posteriores versiones” – “Principio de esfuerzo proporcionado” es frustrante para el usuario. • Si un efecto es difícil de deshacer, también debe ser más difícil de llevar a cabo. Diaz Muñante Jorge 9
  • 10. Diseño de Interfaces de Usuarios IHC es multidisciplinario Factores organizativos Interfaz del usuario Sociología Ciencias de la Antropología computación Etnografía Factores organizativos Factores cognitivos Interfaz del usuario Interacción Diseño Grafico Psicología hombre Ciencias de la computadora información Biblioteca Ergonomía Documentación Factores del entorno, Interfaz del usuario Salud / Seguridad Confort Fuente: Granollers, Lores, Cañas (2005) y Carreras (2007) y propio IHC es multidisciplinario IHC es multidisciplinario Psicología. Ergonomía. – Estudia el comportamiento y los estados de la conciencia de un individuo. – Estudia las condiciones de adaptación recíproca de la persona con su actividad y las herramientas que utiliza. – En la IHC permite estudiar la forma en la que los individuos perciben • Estudia las características físicas de la interacción: entorno de trabajo, condiciones los objetos y procesan la información que reciben. ambientales, características físicas de los mecanismos de interacción. – Permite evaluar y determinar el grado de satisfacción de las interfaces. – Permite estudiar: – Se utiliza en las fases de: • Organización de los controles y las pantallas. • El uso de los colores. • Análisis de requisitos. • Aspectos de salud que afecten a la calidad de la interacción y a las restricciones de – Conocer el modelo mental de los individuos, es decir cómo perciben ellos la tarea los usuarios. que se ha de realizar. • El entorno físico de la interacción. • Diseño. – Se utiliza en las fases de: – Para plasmar ese modelo mental en el sistema, por ejemplo utilizando las metáforas adecuadas • Análisis de requisitos, mediante el estudio del entorno de interacción. • Diseño, para decidir la organización de los controles y las pantallas, colores, etc. • Lanzamiento, para evaluar si se han cumplido las normas ergonómicas y adecuarse a los imprevistos. Diaz Muñante Jorge 10
  • 11. Diseño de Interfaces de Usuarios IHC es multidisciplinario IHC es multidisciplinario Ciencias de la computación. Diseño gráfico y Ciencias de la Información. – En los productos basados en software, dan las bases para la construcción – El diseño gráfico creará objetos “bellos y útiles”. Concepción de un objeto material de la interfaz. destinado a su producción en serie. – En la IHC se utilizan distintos aspectos de la computación: – Las ciencias de la información permiten organizar el contenido visualmente • Ingeniería de software. para que sea fácilmente asimilable (jerarquía, disposición, etc.). – Da las bases metodológicas y proporciona los procesos para construir el producto software. – Un buen diseño gráfico de pantallas, iconos, etc. conseguirá interfaces que no – Materializa las especificaciones técnicas y dan las pautas para la codificación de cada una de producirán un rechazo al usuario y facilitará el uso de los elementos, al tiempo las partes. que una buena organización jerárquica de los elementos facilitarán la – Se aplica en todas las fases del desarrollo. interpretación de la información mostrada. • Programación. – El diseño gráfico y las ciencias de la información se utilizarán en el diseño de la – Normalmente, para la codificación de interfaces gráficas, orientada a objetos y guiada por información. eventos. – Se utiliza en las fases de: – Se aplica en las fases de diseño (creación de prototipos) e implementación. • Inteligencia artificial. • Diseño, al tener que proporcionar la visualización al usuario de los elementos propuestos para el diseño del sistema, establecer el aspecto de las metáforas – Para el diseño de programas que simulen el comportamiento humano (tutoriales, sistemas utilizadas, el estilo gráfico de la aplicación, su consistencia con la imagen corporativa expertos, interfaces guiadas por el habla…). de la empresa, etc. – Se utiliza en todas las fases siempre que el sistema requiera ese tipo de funcionalidad. IHC es multidisciplinario Roles en un IU Documentación. Sistema Interactivo – Estudia los procesos informativos desde la producción de información, hasta que el usuario la convierte en conocimiento. – En IHC es especialmente importante desde la perspectiva de la Arquitectura de la Núcleo Software Look Información (AI): Funcional de la IU &Feel • El estudio de la organización de la información con el objetivo de permitir al usuario encontrar su Operador vía de navegación hacia el conocimiento y la comprensión de la información (Richard Saul Wurman, 1975). • La arquitectura de la información se encarga del... Implem. – El diseño estructural en entornos de información compartida. Herram. – Organizar y rotular sitios web, intranets, comunidades en línea y software para promover la usabilidad y encontrabilidad (findability). Requeri- » Capacidad de ser encontrado tanto por usuarios como por sistemas de información y facilidades de navegación de la aplicación para encontrar la información mientos Diseñador Diseñador Herram. – Se utiliza en las fases de: NF software IU Construcc. • Análisis de requisitos para averiguar cuál será la estructura de la información que se deberá mostrar. • Diseño, para desarrollar distintos aspectos de la interfaz (búsquedas, navegación, categorías de Especif. ítems, etc.). Tareas Diseñador Diseñador • Lanzamiento, para evaluar aquellos aspectos relacionados con la búsqueda de información, IU clasificación, categorización, etc.). SI Roles en un IU Roles en IU “Operador” / “usuario” / “usuario final” • Persona que utilizará el sistema interactivo. “Diseñador del núcleo funcional” o “programador de la aplicación” “Diseñador del sistema” • Desarrolla la arquitectura global de un SI • Crea la estructura de software necesaria para implementar las tareas semánticas de la aplicación (no incluidas en la IU) – Especifica las tareas que serán efectuadas dentro de cada módulo “Diseñador de la interfaz a usuario” “Diseñador del software de la interfaz a usuario” • Define la IU con la cual interactuará el operador • Diseña la estructura del software que implementará la interfaz – Utiliza la especificación de tareas definida por el diseñador de la IU. • Necesita comprender: “Desarrollador de herramientas” – Tareas a ser resueltas • crea herramientas para la construcción de interfaces – Necesidades del operador – Costos y beneficios de las UI particulares No todos los actores se encuentran presentes en el proceso » En términos del operador y los costos de implementación y mantenimento de desarrollo de un SI Diaz Muñante Jorge 11
  • 12. Diseño de Interfaces de Usuarios ¿por qué diseñadores IU? Ciclo de Diseño UI – Producen interfaces con menos errores – Interfaces permitiendo una ejecución más rápida Ciclo Iterativo – Los programadores no piensan de igual forma que los operadores Diseño • Los programadores poseen un modelo del sistema, no un modelo del usuario – Diferentes clases de interfaces y problemas Interfaz Prototipeo Pueden trabajar conjuntamente con: – Usuarios – Programadores Evaluacion – Diseñadores del sistema – Especialistas en diseño gráfico, factores humanos, sicología, etc.. ¿Cómo diseñar y contruir UI’s? Análisis de tareas Ciclo de diseño Análisis – Análisis de tareas – Definir la tarea u objetivo del programa – Elegir la plataforma y los mecanismos de interacción – Prototipeo rápido – Caracterizar el usuario promedio – Evaluación Diseño “Conceptual” – Iteración – Definiciones y primeros bocetos – Selección de metáforas Prototipeo rapido Evaluacion Estructurar un diseño en papel Evaluación analítica – O mas ¡¡ – Sin usuario Tecnicas de prototipos de baja Pruebas con usuarios fidelidad reales – Papel sketchs Técnicas de bajo costos – Cortar, copiar y pegar – Heurística Herramientas de prototipeos – Recorrido cognitivo – Flash, Javascripts Estructuradores de IUS Alto costo – Interface Builder, Visual Studio, – Pruebas de usabilidad en NetBeans laboratorios Diaz Muñante Jorge 12
  • 13. Diseño de Interfaces de Usuarios Origenes de la disciplina Origenes de la disciplina La IPO nace de una rama de la psicología aplicada que estudia la forma de trabajar de las Años 70 personas: – Human factors (EEUU). – Computadoras manejados por personal especializado. – Ergonomía (Europa). Hacia los años 60 se comienza a tomar conciencia de los problemas que deberían – Prima la eficiencia del sistema más que el tiempo de aprendizaje. resolverse para facilitar la utilización de los ordenadores por parte de las personas. – Licklider (1960) Años 90 • Crear un sistema de E/S para la comunicación utilizando gráficos y datos simbólicos. – La popularización acerca a la población al uso del computador • Desarrollar sistemas interactivos en tiempo real (se trabajaba en batch). • Sistemas que faciliten la cooperación de las personas en el desarrollo de grandes sistemas. – El computador no es una herramienta en si mismo, sino que se usa en • Reconocimiento de voz y de la escritura manual. el trabajo diario. • Comprensión del lenguaje natural. – ● Hansen (1971), primera enumeración de principios de diseño de sistemas interactivos. – Es necesario dotar a los sistemas de mecanismos que faciliten la • Conocer al usuario. relación con el usuario y mejoren la productividad. • Minimizar la memorización, sustituyendo la entrada de datos por la selección de elementos. • Optimizar las operaciones basándose en la observación del uso del sistema. • Facilitar buenos mensajes de error, prevenir los errores (de entrada de datos), posibilitar la recuperación de errores (deshacer). Origenes de los sistemas de interaccion GUIs de Escritorio Sistemas primitivos de interacción. – La entrada/salida se realizaba mediante cintas o tarjetas perforadas y teleimpresoras. – Sistemas de procesamiento por lotes. Años 60: sistemas de tiempo compartido mediante terminales en modo texto. – Interfaz de línea de órdenes. – Flexibles y veloces para usuarios avanzados. Aplicaciones webs Escritorio 3D Diaz Muñante Jorge 13
  • 14. Diseño de Interfaces de Usuarios Dispositivos móviles IU basadas en el uso del lápiz IU en paredes La interfaz del usuario * Para que una interfaz de usuario sea efectiva se debe sustentar sobre la idea de affordance. – Las cosas deben sugerir por su forma u otros atributos qué se puede hacer con ellas. Para ello se debe centrar en dos conceptos: – Visibilidad. El objeto debe ser visible para el usuario de forma que se pueda interactuar fácilmente con él. – Evidencia. La funcionalidad del objeto y su modo de uso deben ser evidentes. Visibilidad / Evidencia .. Ergonomia Estudia las características físicas de la interacción: entorno de trabajo, condiciones ambientales, características físicas de los mecanismos de interacción. Permite estudiar. – Organización de los controles y las pantallas. – agrupación funcional. Se agrupan controles funcionalmente relacionados. – Agrupación secuencial. Se agrupan los controles reflejando el orden de uso en una interacción típica. – Por frecuencia. Se agrupan los controles por la frecuencia de uso. Los más utilizados deben ser los más fácilmente accesibles. Diaz Muñante Jorge 14
  • 15. Diseño de Interfaces de Usuarios Ergonomía Ergonomia .. Permite estudiar también: – Aspectos de salud que afecten a la calidad de la interacción y a las restricciones de los usuarios. – El entorno físico de la interacción. – El uso de los colores. • Tan diferentes como sea posible. • Fácilmente distinguibles al margen de la luz ambiental o los defectos visuales del usuario. Comentarios en contra de la usabilidad Conclusiones Los usuarios no necesitan mejores interfaces sino un entrenamiento La IHC es una disciplina bien asentada mejor. La usabilidad es subjetiva —no se puede medir. La interfaz es un concepto amplio y en la que hay que tener en cuenta todo el entorno El diseño de la interfaz de usuario está implícito en el diseño del software. No se tiene que planificar expresamente y valorar su coste. Acceso para todos Si el diseñador esta familiarizado con guías de estilo y principios de diseño, se harán buenas interfaces. La usabilidad como objetivo fundamental El diseño de la interfaz de usuario no es necesario hasta el diseño La interdisciplinariedad de la IHC detallado. Diseño centrado en el usuario La usabilidad aumenta los costes de desarrollo y el tamaño del ciclo de desarrollo. Diaz Muñante Jorge 15