SlideShare una empresa de Scribd logo
Diseño de Interfaces de Usuarios




                          Diseño de Interfaces           Profesor:
                              de Usuarios
                                                    Diaz Muñante Jorge
                              Ciclo 2012-1




                     Metodos de Evaluacion                                 Evaluación Heurística (EH)
                                                                           Profesor: Jorge Diaz Muñante

                                                                           10/06/2012




       Diseño Iterativo                                                   ¿qué es heuristica?




                                                 Diseño                     ANSI/IEEE Std 100-1984, trata de métodos o algoritmos exploratorios durante la
                                                                                 resolución de problemas en los cuales las soluciones se descubren por la
                                                     Analisis de Tareas              evaluación del progreso logrado en la búsqueda de un resultado final.
                                                     escenarios
             Prototipo                               sketching
          low-fi
             papel


                                                  Prueba low-fi
                                    Evaluar       … Hoy EH




                                                                          Evaluación Heurística


                                                                           Desarrollado por Jakob Nielsen
                                                                           Ayuda encontrar problemas de usabilidad en el diseño de IU
                                                                           Conjunto pequeño de evaluadores de IU (3-5)
                                                                           – Revision independiente para verificar el cumplimiento de
                                                                             los principios de usabilidad (“heuristica”)
                                                                           – Evaluadores diferentes pueden encontrar diferentes
                                                                             problemas
                                                                           – Los evaluadores solo se comunican despues de la
                                                                             evaluación
                                                                           Puede desarrollarse sobre IU en confeccion o sobre sketches




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




        ¿por qué diferentes evaluadores?
                                                                 Proceso de la EH

         Un evaluador no
          encuentra todos los                                     Evaluadores observan la IU varias veces
          problemas                                               – revisión de varios elementos de diálogo
         Buenos evaluadores                                      – compara con la lista de principios de usabilidad
          encuentra los faciles y
                                                                  – considera otros principios/resultados que influyen
          dificiles
                                                                  Principios de usabilidad
                                                                  – Heurísticas de Nielsen (10)
                                                                    • Primer Set ( 1990)       Segundo Set (1994)
                                                                  – Lista suplementaria de categorías específicas
                                                                    • Competencia del análisis y pruebas del usuario de productos
                                                                      existentes
                                                                  Usar las violaciones para redefinir o fijar los problemas




       Diferencia con la Ingeniería de Usabilidad                Heuristicas (original)

                                                                   H1-1: Diálogo simple y            H1-6: Señalar claramente
       Barato                                                      natural                            las salidas
        – No se necesita laboratorios o equipos especializados     H1-2: Hable en el lenguaje        H1-7: Abreviaturas
                                                                    del usuario                        (shortcuts)
       Rapido                                                                                        H1-8: Preciso & mensajes
                                                                   H1-3: Minimizar la carga de
        – a lo mas en un 01 dia                                                                        de errores constructivos
                                                                    memoria del usuario
        – Una prueba de usabilidad estándar puede durar unas                                          H1-9: Prevenir errores
                                                                   H1-4: Consistencia
          semanas                                                                                     H1-10: Ayuda y
                                                                   H1-5: Feedback o                   documentación
       Facil de usar                                               retroalimentación
        – puede ser aprendido en 2 - 4 horas




       H.1. Diálogo simple y natural                             H.1. Información justa


       Cuanto más simple, mejor.                                Presentar sólo la información que necesita el
        – Cada elemento es una cosa más a                         usuario y no más
          • aprender                                              – en el momento que se necesite
          • saltarse cuando se busca un elemento concreto         – en el lugar que se necesite
          • posiblemente mal entendido
                                                                 La información que se necesita utilizar
       Debe encajar de manera natural con la tarea del           conjuntamente debe presentarse agrupada
        usuario
                                                                  – como mínimo, debe aparecer en la misma pantalla
        – correspondencia elementos informáticos-mundo real
        – minimizar la navegación por la interfaz.




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




       H.1. Secuencia adecuada a las tareas                                         H.1. Organización de la pantalla


       Los objetos de información se deben mostrar en la                           Seguir los criterios de la percepción humana:
        secuencia en la que los usuarios hacen las cosas.                            – Las cosas se perciben como una unidad si:
        – No imponer secuencia salvo que sea necesario.                                • están juntas
        – Permitir al usuario controlar el diálogo                                     • están rodeadas por líneas o cajas

          • para adaptar las tareas a sus preferencias                                 • se mueven o cambian a la vez
                                                                                       • se parecen con respecto a forma, color, tamaño o tipografía.
        – Proponer una secuencia sugerida
          • implícita: secuencia de campos mostrados verticalmente
          • explícita:secuencia de cajas que se recomienda en una ventana




       H.1. Organización de la pantalla                                             H.1.Organización de la pantalla


       Cajas de diálogo con:
        – opciones agrupadas dentro de la misma caja
                                                                                         Cuidado al separar para evitar que
                                                                                          elementos similares se consideren asociados
        – separadas mediante líneas o espacios en blanco                                  a otros.

                                                                                         Saldo


                                                                                         S/ 10,000                                       S/ 2,000

                                                                                         ¿cuál es el saldo?
                                                                                                               ¿ S/ 10,000 ó S/ 2,000?




       H.1 Organización de la pantalla                                              H.1 Uso de colores en las pantallas


       Para atraer la atención del usuario                                         Otras recomendaciones con respecto al uso de
        – TEXTO EN MAYÚSCULAS                                                        colores en pantallas:
          • No hacerlo con mucha frecuencia                                          – No recargarla en colores
            – Leer texto en mayúsculas es un 10% más lento que uno con mayúsculas      • no más de 5 a 7 distintos.
              y minúsculas
                                                                                       • Gris claro y colores pastel mejor como fondos
        – Objetos parpadeantes
                                                                                     – Asegúrate de que se puede usar la interfaz sin colores
          • SÓLO EN CASOS MUY EXTREMOS
                                                                                       • daltónicos, pantallas monocromo
            – porque es molesto y distrae mucho
                                                                                     – El color sólo para categorizar, diferenciar y resaltar
                                                                                       • No para dar información (especialmente cuantitativa)




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




       H.1. Menos es más (DSN:MEM)                                              DSN:MEM


       “El rey Harald ordenó construir estos mausoleos en honor                  Añadir info y campos de datos a una IU puede distraer de la
        de Gorm, su padre y Thyre, su madre, progenitores del                     información más importante.
        que conquistó por sí solo toda Dinamarca y Noruega e                     – Normalmente se puede identificar la info importante
        hizo a los daneses cristianos: el rey Harald.”                             mediante un análisis adecuado de tareas.
                                                                                   • Hacer una pantalla sencilla con esa información
       [inscripción en una losa, S. X en Dinamarca]
                                                                                   • Relegar la demás información a pantallas auxiliares

                  ¿Cuál es el mensaje?                                           Cualquier información que se presente es algo
                                                                                 – que los usuarios tendrán que mirar
                                                                                   • reducirá su velocidad de trabajo (fracción de segs.)




       Ejemplo de un Call Center                                                Ejemplo de una Empresa de RRHH


         Antes                               Despues
                                                                                 Antes                                Despues




                                                                                Los usuarios tenian problemas en     La informacion clave ahora esta
                                                                                encontrar la informacion             en el Home Page
        Una aplicacion original tenia 18     80% de llamadas pueden ser
        pantallas.                           respondidas en una sola pantalla




       DSN:MEM                                                                  DSN:MEM: Estilos de interacción alternativos


       Evitar información innecesaria que ocupa espacio                        Reducir funcionalidad <> E.I. Alternativos
        de pantalla con:                                                         – teclado + manipulacíón directa + abreviaturas
         – Logos de la empresa                                                  Alternativas:
           • mejor al comienzo de la aplicación (además sirve de feedback al
             usuario)                                                            – El usuario debe ser capaz de decidir cuál es la mejor
         – Número de la versión del sistema en uso                               – Para aprender:
           • mejor accesible a través del sistema de ayuda del sistema             • Mejor ver 1º el método general (luego ya aprenderán)
                                                                                   • los métodos alternativos más tarde
                                                                                     – asegurarse de que no confunden a los novatos




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




       2 Hablar el lenguaje del usuario (HLU)                                                               2 Hablar el lenguaje del usuario (HLU)


         My programagave me the
         Mi program ha dado el               That’s
                                          Eso es                                    No, no ... Rsdrd Info
                                                                                     No, no… Info rstrgda
                                                                                                            La terminología se debe basar en el lenguaje del
          message Rstrd Info.              restricted       But surely segura
                                                            Pero estas you can
         mensaje “Info rstrgda”.          informacion                              stands for “Restricted
         ¿qué significa? mean?
          What does it                    information
                                          restringida
                                                                 tell me!!!
                                                            que eso dice !!!        significa información
                                                                                         Information”
                                                                                    restringida
                                                                                                             usuario (nunca del sistema)
                                                                                                            Usar la lengua (idioma) del usuario. Utilizar
                                                                                                             elementos no verbales como los iconos
                                                                                                             – no usar palabras poco frecuentes
                                                                                                             – si los usuarios tienen terminología especializada, se usa
                                   It means the que el
                                    Eso significa program             Ok, voy a take a un
                                                                       Ok, I’ll tomar                          (mejor palabrás específicas y sin ambigüedad).
         Hum... Perowhat
         Hmm… but que
                                   is too busyesta muy
                                    programa to let you                    coffee
                                                                             trago
         significamean???
         does it !!!
                                    ocupado .. onno
                                           log Y                                                             – Desde la perspectiva del usuario.
                                      puedes ingresar




       HLU: ¿Cómo conseguir HLU?                                                                            HLU: Otras maneras


       ¿Preguntar a los usuarios?                                                                          El computador admite sinónimos
        – El desacuerdo verbal garantiza fracaso                                                            Permitir uso de alias
          • Experimento[Furnas et al, 1987]                                                                  – creados por el usuario
       Dejar que los usuarios voten entre una serie de                                                      – creados por el sistema [Furnas, 1985]
        posibilidades
        – Experimento de [Bloom, 1988]




       HLU:CYM: Metáforas                                                                                   HLU:CYM: Problemas


       Establecen correspondencia entre:                                                                   Cuidado de no implicar más de lo que se pretende
        – el sistema informático                                                                             de manera inadvertida.
        – un sistema de referencia conocido por los usuarios                                                 – La metáfora debe ser un modelo más simple de un modelo
                                                                                                               más detallado del sistema y no una representación directa
       También pueden confundir a los usuarios                                                                del mismo.
        – Máquina de escribir y Procesador de textos                                                        Cuidado a la hora de internacionalizar la interfaz
        – Papelera de reciclaje y borrar archivos                                                            – No todas las cosas significan lo mismo en distintas
                                                                                                               culturas.




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




       HLU                                                             3 Minimizar la carga de memoria del usuario (MCM)



                                                                      Computadora es buena:                     Personas buenas en:

                                                                       – recordar grandes cantidades              – reconocer elementos
                                                                         de datos con mucha                         que se les muestran
                                                                         precisión                                  incluso con ruido de
                                                                                                                    fondo
                                                                       – manejan y cuentan
                                                                         cantidades físicas                       – detectar eventos
                                                                                                                    inusuales y/o
                                                                       – comportarse de igual manera                inesperados
                                                                         incluso sobre grandes
                                                                         espacios de tiempo                       – adaptar la respuesta
                                                                                                                    física a los cambios de
                                                                       – etc.                                       situación.




       MCM: ¿Cómo MCM?                                                 MCM: ¿Cómo MCM?


       Mostrar elementos de diálogo a los usuarios                    Introducción de datos:
        – Permitirles elegir entre los ítems generados                   – Describir el formato requerido
        – Permitirles editar los ítems generados                         – Dar un ejemplo de entrada de datos legal
        – MENÚS                                                          – Dar un valor por defecto
       Visibilidad                                                      – Recordar rangos de entrada y unidades de medida
        – Mostrar los objetos de interés para el usuario
                                                                       Entrar fecha: (dd-MMM-aaaa, por. Ej. 08-jun-2012):
        – ¡OJO! Mostrar demasiados objetos y atributos va en contra
          del principio menos es más                                   Margen izquierdo:      10 puntos [0-128]




       MCM                                                             MCM




               Dar formatos en los datos de ingresos.
               A través de un “Ejemplo” o o datos por omisión




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




       MCM                                                          4 Consistencia



                                                                       Uno de los principios más básicos
                                                                       Si un usuario sabe que una acción siempre tiene
                                                                        el mismo efecto se sentirá:
                                                                         – más confiado a la hora de utilizar el sistema
                                                                         – más animado a la hora de probar el sistema mediante
                                                                           exploración
                                                                       porque tiene parte del conocimiento necesario
                                                                        para operar con nuevas partes del sistema.




       Consistencia en el diseño de la interfaz                     5 Feedback (FB)


       Misma información  misma posición y mismo                  Informar al usuario de:
        formato en la pantallla y en las cajas de diálogo            – qué se está haciendo
       Seguir un estándar de diseño de interfaz                     – cómo se interpreta la entrada que aporta el usuario
        – cómo indicar que hay disponible un menú emergente (pop-
          up)
                                                                                                                           Tiempo
                                                                            ¿qué
        – tipo de letra a utilizar (fuente y tamaño)                        pasa?      >Bajando!         > Bajando
                                                                                                         Tomará 5
                                                                                                                           para el
                                                                                                                            cafe.
                                                                                                         minutos...
        – Dejan muchos grados de libertad a los diseñadores



                                                                                             No espere que ocurre
                                                                                             un error




       FB: ¿Cómo?                                                   Mejor ¡¡


       Refrasear la entrada proporcionada al usuario
       Hacer la operación y no decir nada
        – “Archivo a grabar ya existe”
        –o




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




       Una mas reciente                                               FB: Grados de persistencia


                                                                      Corta
                                                                       – El mensaje es relevante mientras ocurre un suceso. El
                                                                         mensaje debe desaparecer una vez que el evento deja de
                                                                         existir.
                                                                      Intermedia
                                                                       – El usuario debe ser consciente del mensaje enviado. Se
                                                                         hace que el usuario reconozca haberlo leído.
                                                                      Larga:
                                                                       – Se convierte en una parte permanente de la interfaz




       FB: Tiempo de respuesta (TR)                                   FB:TR: 0,1 segundos


       El Feedback es importante cuando el sistema tiene             00,1 segundos:
        largos tiempos de respuesta                                    – límite para que el usuario perciba que el sistema está
       [Miller, 1968; Card et al., 1991] Límites en los                 reaccionando instantáneamente.
        tiempos de respuesta de acuerdo con la actitud                 – No es necesario ningún tipo de feedback.
        cognitiva del usuario:                                         – Basta con mostrar los resultados
        – 0,1 segundos
        – 1,0 segundos
        – 10,0 segundos




       FB:TR: 1,0 segundos                                            FB:TR: 10 segundos


       01,0 segundos:                                                10,0 segundos:
        – límite aproximado para que el flujo de pensamiento no se     – límite aproximado de mantenimiento de la atención del
          interrumpa aunque se perciba retraso                           usuario sobre el diálogo
        – No suele ser necesario ningún tipo de feedback (entre 0,1    – Si es superior, el usuario querrá hacer otras tareas
          y 10 segundos)                                                 mientras espera a que el computador termine.
        – El usuario pierde la sensación de que está operando          – El feedback debe indicar cuándo se espera finalizar la
          directamente con los datos.                                    tarea




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




       FB:TR: Variable                                             FB:TR: ¿Cuándo dar feedback? ¿de qué tipo?


       Variable:                                                  En los casos en los que el computador no puede
        – indicar cuánto tiempo se necesita para acabar la tarea    proporcionar una respuesta inmediata.
        – así el usuario sabe a qué atenerse                       Si TR > 10 segs ofrecer un indicador de progreso
                                                                    – indican al usuario que no se ha producido fallo en el
                                                                      sistema (no se ha quedado colgado)
                                                                    – indican aproximadamente cuánto tiempo tiene que esperar
                            Contacting host (10-60 seconds)           el usuario
                                                                    – proporciona al usuario algo a lo que mirar
                                                  cancel




       FB                                                          FB



                                                                     Varios archivos se estan
                                                                     copiando, la retroalimentación
                                                                     es archivo por archivo




                                                                                              Drawing Board LT




       FB:TR: No se puede estimar duración                         FB: Fallos del sistema (FS)


       indicar cantidad de trabajo que se está realizando
       indicar, al menos, que se está trabajando                  Dar feedback informativo
       Si 2<TR<10
        – no usar indicador de progreso                            Nunca dejar de responder sin un mensaje
        – utilizar cambios en los cursores
        – cifras que cambian en una parte de la pantalla
                                                                   Hacer que los sistemas tengan una degradación
                                                                    graciosa




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




       6 Señalizar la salida (SLS)                                     SLS


       El usuario controla los diálogos si, en cualquier
        momento, tiene una puerta que signifique                                                                            ¿cómo
        interrumpir el proceso actual                                                                                       salgo
                                                                                                                              de
        – En procesos en los que el TR>10                                                Tiene                              esto?
       Otra manera: funcionalidad de DESHACER                                           20 segundos
                                                                                         para
       Responder a acciones del usuario antes que a los                                 completarlo
                                                                                  “Cancelar” (para dialogos que esperan un ingreso)
        procesos largos                                                           “Deshacer” (permite regresar a un estado previo)
       Las salidas SIEMPRE VISIBLES                                              “interrumpir” (especialmente para operacione largas)
                                                                                  “Salir” (para liberar el programa en cualquier momento)
                                                                                  “Omisión” (Para recuperar opciones pre-establecidas)




       7 Abreviaturas (ABR)                                            ABR: input con adelanto


       Para   operaciones            frecuentes     de     usuarios   No es abreviatura
        experimentados                                                  – El usuario tiene que escribir completamente la entrada
        – con teclas de función                                         – permite no atender a todos los elementos de diálogo
        – con teclas especiales (CTRL, ALT, WINDOWS)                   Se puede usar en interfaces telefónicas
        – con operaciones del ratón (ejm. doble click)
                                                                        – interrumpir la lista de opciones que se ofrecen
                                                                       También en IGUs - click con adelanto
                                                                       ¡OJO! Peligrosos si se permiten en cualquier
                                                                        circunstancia




       ABR: Historia de la interacción                                 ABR: Valores por defecto


       Los usuarios deben poder reutilizar la historia de la          Son abreviaturas
        interacción.                                                    – es más rápido reconocer un valor por defecto y aceptarlo
        – Opciones de menú con los últimos comandos                       que especificar un valor o una opción
        – Repetir el último comando de búsqueda                         – Pueden estar ocultos en una pantalla opcional por si el
                                                                          ususario necesita modificarlos
        – Visualización de los últimos estados (en IGUs)
                                                                       Ayudan a conocer el sistema
       Otras abreviaturas
                                                                        – reducen el número de acciones de los usuarios
        – últimos archivos abiertos
                                                                        – dan indicación del tipo de valores que se pueden
        – abrir archivos que suelen abrirse conjuntamente
                                                                          especificar de manera legal
         • más complicados de conseguir




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




       8 Mensajes de error [ERR]                                       ERR: Recomendaciones de uso de los mensajes


       Las situaciones de error son críticas porque:                  Lenguaje claro y sin oscuros códigos
        – representan situaciones en las que el usuario tiene          Deben ser precisos (no vagos ni generales)
          problemas y es posible que no pueda usar el sistema para
                                                                       Ayudar de manera constructiva a resolver el
          conseguir el objetivo deseado
                                                                        problema
        – son oportunidades del usuario para comprender mejor el
          sistema ya que motivan al usuario a prestar atención a los
                                                                       Mensajes educados y no intimidatorios
          contenidos de los mensajes porque es el computador el         – No echar la culpa al usuario
          que tiene el conocimiento de en qué consiste el sistema       – refrasear y hacer que el computador asuma la culpa (como
                                                                          realmente está ocurriendo, porque la interfaz tendría que
                                                                          haber sido diseñada para que no se produjera dicho error).




       ERR                                                             ERR: Recuperación de los errores


                                                                       Resolver los problemas ocasionados por una
                                                                        interacción errónea
                                                                        – Deshacer
                                            Ha ocurrido                 – Editar y relanzar comandos anteriores
                                            error 15762
                                                                       Mensajes de múltiples niveles
                                                                        – Mensajes más cortos y más rápidos de leer
                                                                        – Con acceso a una descripción más detallada [técnica] del
                                                                          error que se ha producido
                                                                        – Normalmente 2 niveles [teóricamente podría haber n, y
                                                                          navegar entre ellos en un hipertexto]

                    ¿cuál es el “error 15762”?




       9 Prevenir errores [PE]                                         10 Ayuda y documentación [AYD]


       Mejor que proporcionar mensajes de error es evitar              Mejor que el sistema no haga necesaria la utilización de la
        las situaciones de error.                                        ayuda o documentación.

        – Teclear algo =>posibles errores tipográficos                  Documentación:
                                                                        – Para que los usuarios alcancen más habilidad
       ¿Cómo conocer las situaciones de error?
                                                                        Hecho: ¡Los usuarios no leen los manuales!
        – Evaluación de la interfaz y los usuarios
                                                                        – Sólo en situaciónes de pánico y necesitan ayuda inmediata
        – Mediante un sistema que apunte los errores cometidos
                                                                        Por tanto: DOCUMENTACIÓN ON-LINE
       OBJETIVO: reducir la frecuencia de los errores
                                                                                                                                  Volume 2
        – sobre todo los que tienen consecuencias serias                                                                          DIU




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




       AYD: Uso de la documentación


       Los usuarios atraviesan tres estados cuando
        interactúan con manuales y sistemas de ayuda:
        – Buscar. Localizar la información relevante para una
          necesidad específica.
        – Entender la información.
        – Aplicar el procedimiento tal y como se describe en la
          documentación.
                                                                               Segunda
                                                                               categorización heurística
                                                                                                    Jacob Nielsen
                                                                             10/06/2012




       Heuristicas (revisado)                                             H2-1: Visibilidad del estado del sistema



                                    searching database for matches       MS Windows: Buscar                              IE: descarga
                                                                         No estima el tiempo                             Mejor feedback



              H2-1: Visibilidad del estado del sistema
              – Mantener al usuario informado acerca de lo que esta
                ocurriendo
              – ejemplo: prestar atencion al tiempo de respuesta
                • 0.1 sec: no se requiere indicadores especiales
                • 1.0 sec: el usuario tiende a perder la hilación
                • 10 sec: max. duracion de atencion del usuario
                • para demoras mayores, use barras de progreso con
                  porcentaje de realizacion




        Heuristicas (cont.)
                                                                          Dialogo simple

                                                                                                                 Compuserve Information Manager
                                                                                           File   Edit   Services Mail    Special   Window   Help
                            Ejemplo errado: Mac desktop
                                                                                                               Services
                             – Arrastrar el disco al basurero                                             Telephone Access Numbers
                                                                                                                     PHONES
                               • sera borrado, no arrojado                                                       Access Numbers & Logon
                                                                                                                        Instructions
                            H2-2: Empatar el mundo real y el sistema                                               United States and Canada
                                                                                                                         United States and Canada
                             – hable en el lenguaje del usuario                                                               CompuServe Network
                             – Lectura de izq a der y de arriba abajo                                                                Only 9600 Baud
                                                                                                                                             List
                             – Cosas con proximidad física normalmente
                               están relacionadas entre sí                                                                  ? List
                             – Cosas de mayor tamaño normalmente son                                                        List by:
                                                                                                                            State/Province
                               más importantes                                                                              Area Code




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




       Heuristicas (cont.)                                                  H2-3: Control y libertad del usuario

                                           Wizards
                                           – debe responder al que          undo, reconstruir   link al HP   Donde estamos
                                             antes de ir al siguiente
                                           – para tareas no frecuentes
                                             • (ejm. configurar el modem)
                                           – no para tareas comunes
                                          – bueno para los novatos
        H2-3: Control y libertad del usuario• tene 02 versiones (WinZip)
        – “exits” para selecciones
          equivocadas, undo
        – no forzar a pasos rigidos




       Heuristicas (cont.)                                                  Heuristicas (cont.)




                                                                             MS Web Pub. Wiz.
                                                                                                               H2-5: Prevencion de errores
                                                                             Antes de conectarse
                                                                             – pregunta por id & password
                                                                                                               H2-6: Reconocimieno antes que
                                                                                                                re-llamar
                                                                             Cuando se conecta
           H2-4: Consistencia y estandard                                                                     – Hacer objetos, acciones y
                                                                             – pregunta otra vez por id &        direcciones visibles y faciles
                                                                               pw                                de recuperación




        Heuristicas (cont.)                                                 Heuristicas (cont.)




                                                 Ctrl + C


          H2-7: Flexibilidad y eficiencia en el uso
          – aceladores para expertos (shortcuts)                                    H2-8: Diseño estetico y minimalista
          – permitir a los usuarios abreviar acciones frecuentes (ejm.               – No incluir informacion no importante en los dialogos
            macros)




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




       Heuristicas (cont.)                                             Heuristicas (cont.)


                                                                       H2-10: Ayuda y documentación
                                                                        – facil para buscar
                                                                        – focalizado sobre las tareas del usuario
                                                                        – lista concreta con los pasos a realizar
                                                                        – no muy extenso
         H2-9: Ayuda para que el usuario reconozca,
          diagnostique y se recupere de errores
           – mensajes de error con lenguaje sencillo
           – indicar con precision el problema
           – Sugerir una solucion




       Fases de EH                                                     ¿cómo desarrollar la evaluación?


       1) Entrenamiento de pre-evaluacion                              Al menos en 02 pasos por cada evaluador
        – dar a los evaluadores el conocimiento e información           – primero dar un “feel” y objetivo del sistema
          necesaria sobre el escenario
                                                                        – segundo, focalizar sobre elementos especificos
       2) Evaluacion                                                   Si el sistema es instale_use o los evaluadores son expertos,
        – evaluación individual y luego agrupar los resultados           no necesita asistencia
       3) Clasificación de severidad                                   – caso contrario ayudar a los evaluadores con escenarios
        – determinar el grado de severidad de cada problema             Cada evaluador produce una lista de problemas
          (prioridad)
                                                                        – explicar la referencia heuristica u otra información
       4) Resumen
                                                                        – ser especifico y listar cada problema por separado
        – discutir los resultados con el grupo de diseño




       Ejemplos                                                        ¿cómo desarrollar la evaluación?


       No puede copiar informacion desde una ventana a                ¿Porque listados por cada violación?
        otra                                                            – Riesgo de repetir aspectos problemáticos
        – viola “Minimizar la carga en la memoria al usuario” (H1-3)    – puede no ser fácil solucionar todos los problemas
        – solucion : permitir el copiado                               donde los problemas pueden ser encontrados
       Tipografia: usa mezcla de minusculas y mayusculas               – en un solo lugar del IU
        en los formatos y fonts
                                                                        – 02 o más lugares que necesitan ser comparados
        – viola “Consistencia y estandard” (H2-4)
                                                                        – problemas con estructuras generales de IU
        – solucion: un formato simple para toda la interfaz




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




       Clasificación de severidad                                      Clasificación de severidad (cont.)


       Usado para distribuir los recursos a la solución de            0 - Difiere al conjunto de heurística
        los problemas                                                  1 - problema cosmético
       Estimar el esfuerzo necesario para una mayor                   2 - problema de usabilidad mínimo
        usabilidad
                                                                       3 - problema de usabilidad mayor; importante para
       Combinación de                                                  solucionarlo
        – frequencia
                                                                       4 - Usabilidad catostrófica; obligatorio su solución
        – impacto
        – persistencia (una vez o repetitivo)
       Debe ser calculado despues que todos los
        evaluadores terminen
       Debe ser hecho independiente




       Factores de severidad                                           Resumen


       Frecuencia.                                                     Realizado con los evaluadores, observadores, y los
                                                                         miembros de desarrollo
        – Raro o comun el problema
                                                                        Discutir las caracteristicas general del IU
       Impacto
                                                                        sugerir mejoras potenciales para mejorar los problemas de
        – Cuando ocurre si es dificil recuperarse                        usabilidad
       Persistencia                                                    Desarrollar ratios de las cosas que son dificiles de solucionar
        – Si el usuario repite el error.                                Hacer una sesión de tormenta de ideas
                                                                        – crítico hasta finalizar la sesión




       Ejemplos de clasificación de severidad                          EH vs. Prueba del Usuario


                                                                        EH es mucho más rápido
                                                                        – 1-2 horas por cada evaluador vs. Dias-semanas
         1. [H1-4 Consistencia] [Severidad 3][solución 0]               EH no requiere interpretar las acciones del usuario
         La interfaz usa la palabra “guardar” en la primera pantalla    La prueba del usuario es mucho mas detallada (por
         para guardar un archivo del usuario, pero se usa las            definición)
         palabras “escribir el archivo” en la segunda pantalla. Los     – toma en cuenta los usuarios actuales y sus tareas
         usuarios puede confundirse por esta diferencia en la
                                                                        – EH puede perder problemas y encontras “falsos
         terminología para la misma función.
                                                                          problemas”
                                                                        Es bueno alternar entre EH y prueba del usuario
                                                                        – Encontrar diferentes problemas




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




       Resultado de usar EH                                             Resultados de usar EH (cont.)


       Disminución: ratio costo-beneficio de 48 [Nielsen94]            Un solo evaluador restringe a pobre resultado
        – cost puede ser $10,500 para un beneficio de $500,000           – solo puede encontrar el 35% de problemas usabilidad
        – valor de cada problema ~15K (Nielsen & Landauer)               – 5 evaluadores encuentran ~ 75% de problemas de
        – ¿cómo llegamos a calcular este valor?                            usabilidad
         • En-casa -> productividad; abrir el negocio -> ventas          – ¿por qué no más evaluadores? 10? 20?
                                                                          • Adicionar evaluadores es mayor costo
       Correlacion entre la severidad y el hallazgo de
                                                                          • muchos evaluadores no implica que encuentren mucho mas
        problemas HE                                                        problemas




       Retorno decreciente                                              Resumen


                                                                        EH es un método barato
             Encontrar problemas                      Costo/beneficio   Los evaluadores revisan la IU
                                                                        Tarea ¿qué no se cumple con las heurísticas?
                                                                        Combinar la busqueda entre 03 a 5 evaluadores
                                                                        Tener evaluadores con clasificación de errores
                                                                         independientes
                                                                        Discutir los problemas con el grupo de diseño
                                                                        Alternar con pruebas del usuario
          Gráfico para un ejemplo específico




Diaz Muñante Jorge                                                                                                                   16

Más contenido relacionado

Similar a C11 evaluacion heuristica_diu

Medidas de usabilidad
Medidas de usabilidadMedidas de usabilidad
Medidas de usabilidad
Anel García Pumarino
 
Guía de Técnicas de Usabilidad
Guía de Técnicas de UsabilidadGuía de Técnicas de Usabilidad
Guía de Técnicas de Usabilidad
Juan Manuel Gonzalez Calleros
 
Instrumento de evaluación (presentación)
Instrumento de evaluación (presentación)Instrumento de evaluación (presentación)
Instrumento de evaluación (presentación)Natalia Alejandra
 
Usabilidad - Conceptos Básicos
Usabilidad - Conceptos BásicosUsabilidad - Conceptos Básicos
Usabilidad - Conceptos Básicos
Karla Arosemena
 
Usabilidad
UsabilidadUsabilidad
Usabilidad
atehortua91
 
005 metodos de inspección de usabilidad
005   metodos de inspección de usabilidad 005   metodos de inspección de usabilidad
005 metodos de inspección de usabilidad
Sole Moris
 
Frank astorga midiendo la usabilidad pure heart
Frank astorga   midiendo la usabilidad pure heartFrank astorga   midiendo la usabilidad pure heart
Frank astorga midiendo la usabilidad pure heart
UX Nights
 
Introduccion uml
Introduccion umlIntroduccion uml
Introduccion uml
ninguna
 
Introduccion uml
Introduccion umlIntroduccion uml
Introduccion uml
ARKANGEL721
 
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
 
C8 recomendaciones diu
C8 recomendaciones diuC8 recomendaciones diu
C8 recomendaciones diuJulio Pari
 
Gui bonsiepe metodologia
Gui bonsiepe  metodologiaGui bonsiepe  metodologia
Gui bonsiepe metodologia
salma jared mendez lima
 
5. Desarrollo Aplicaciones Interactivas (HCI 1)
5. Desarrollo Aplicaciones Interactivas (HCI 1)5. Desarrollo Aplicaciones Interactivas (HCI 1)
5. Desarrollo Aplicaciones Interactivas (HCI 1)
Mario A Moreno Rocha
 
C5 prototipo diu_mododecompatibilidad_
C5 prototipo diu_mododecompatibilidad_C5 prototipo diu_mododecompatibilidad_
C5 prototipo diu_mododecompatibilidad_Julio Pari
 
Usabilidad 101
Usabilidad 101 Usabilidad 101
Usabilidad 101
Armonía A.
 
1 Introduccion Ssd4
1 Introduccion Ssd41 Introduccion Ssd4
1 Introduccion Ssd4UVM
 
Software educativo
Software educativoSoftware educativo
Software educativo
barcemil
 
Software educativo
Software educativoSoftware educativo
Software educativo
barcemil
 

Similar a C11 evaluacion heuristica_diu (20)

Medidas de usabilidad
Medidas de usabilidadMedidas de usabilidad
Medidas de usabilidad
 
Constanzaprieto
ConstanzaprietoConstanzaprieto
Constanzaprieto
 
Guía de Técnicas de Usabilidad
Guía de Técnicas de UsabilidadGuía de Técnicas de Usabilidad
Guía de Técnicas de Usabilidad
 
Evaluacion de Sitios Web
Evaluacion de Sitios WebEvaluacion de Sitios Web
Evaluacion de Sitios Web
 
Instrumento de evaluación (presentación)
Instrumento de evaluación (presentación)Instrumento de evaluación (presentación)
Instrumento de evaluación (presentación)
 
Usabilidad - Conceptos Básicos
Usabilidad - Conceptos BásicosUsabilidad - Conceptos Básicos
Usabilidad - Conceptos Básicos
 
Usabilidad
UsabilidadUsabilidad
Usabilidad
 
005 metodos de inspección de usabilidad
005   metodos de inspección de usabilidad 005   metodos de inspección de usabilidad
005 metodos de inspección de usabilidad
 
Frank astorga midiendo la usabilidad pure heart
Frank astorga   midiendo la usabilidad pure heartFrank astorga   midiendo la usabilidad pure heart
Frank astorga midiendo la usabilidad pure heart
 
Introduccion uml
Introduccion umlIntroduccion uml
Introduccion uml
 
Introduccion uml
Introduccion umlIntroduccion uml
Introduccion uml
 
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
 
C8 recomendaciones diu
C8 recomendaciones diuC8 recomendaciones diu
C8 recomendaciones diu
 
Gui bonsiepe metodologia
Gui bonsiepe  metodologiaGui bonsiepe  metodologia
Gui bonsiepe metodologia
 
5. Desarrollo Aplicaciones Interactivas (HCI 1)
5. Desarrollo Aplicaciones Interactivas (HCI 1)5. Desarrollo Aplicaciones Interactivas (HCI 1)
5. Desarrollo Aplicaciones Interactivas (HCI 1)
 
C5 prototipo diu_mododecompatibilidad_
C5 prototipo diu_mododecompatibilidad_C5 prototipo diu_mododecompatibilidad_
C5 prototipo diu_mododecompatibilidad_
 
Usabilidad 101
Usabilidad 101 Usabilidad 101
Usabilidad 101
 
1 Introduccion Ssd4
1 Introduccion Ssd41 Introduccion Ssd4
1 Introduccion Ssd4
 
Software educativo
Software educativoSoftware educativo
Software educativo
 
Software educativo
Software educativoSoftware educativo
Software educativo
 

Más de 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 Kubernetes
Julio 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 Kubernetes
Julio Pari
 
Indice General Tesis Sistemas UPC
Indice General Tesis Sistemas UPCIndice General Tesis Sistemas UPC
Indice General Tesis Sistemas UPC
Julio Pari
 
Arquitectura Web FISI UNMSM
Arquitectura Web FISI UNMSMArquitectura Web FISI UNMSM
Arquitectura Web FISI UNMSM
Julio Pari
 
Jelastic Enterprise
Jelastic EnterpriseJelastic Enterprise
Jelastic Enterprise
Julio Pari
 
Marketing Examen Parcial Profesor Osorio
Marketing Examen Parcial Profesor OsorioMarketing Examen Parcial Profesor Osorio
Marketing Examen Parcial Profesor Osorio
Julio 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 Cordero
Julio Pari
 
Documento de Arquitectura
Documento de ArquitecturaDocumento de Arquitectura
Documento de Arquitectura
Julio 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 FISI
Julio 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 Parcial
Julio Pari
 
Sistemas Distribuidos Examen Parcial
Sistemas Distribuidos Examen ParcialSistemas Distribuidos Examen Parcial
Sistemas Distribuidos Examen Parcial
Julio 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
 

Más de 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
 

C11 evaluacion heuristica_diu

  • 1. Diseño de Interfaces de Usuarios Diseño de Interfaces Profesor: de Usuarios Diaz Muñante Jorge Ciclo 2012-1 Metodos de Evaluacion Evaluación Heurística (EH) Profesor: Jorge Diaz Muñante 10/06/2012 Diseño Iterativo ¿qué es heuristica? Diseño ANSI/IEEE Std 100-1984, trata de métodos o algoritmos exploratorios durante la resolución de problemas en los cuales las soluciones se descubren por la Analisis de Tareas evaluación del progreso logrado en la búsqueda de un resultado final. escenarios Prototipo sketching low-fi papel Prueba low-fi Evaluar … Hoy EH Evaluación Heurística  Desarrollado por Jakob Nielsen  Ayuda encontrar problemas de usabilidad en el diseño de IU  Conjunto pequeño de evaluadores de IU (3-5) – Revision independiente para verificar el cumplimiento de los principios de usabilidad (“heuristica”) – Evaluadores diferentes pueden encontrar diferentes problemas – Los evaluadores solo se comunican despues de la evaluación  Puede desarrollarse sobre IU en confeccion o sobre sketches Diaz Muñante Jorge 1
  • 2. Diseño de Interfaces de Usuarios ¿por qué diferentes evaluadores? Proceso de la EH  Un evaluador no encuentra todos los  Evaluadores observan la IU varias veces problemas – revisión de varios elementos de diálogo  Buenos evaluadores – compara con la lista de principios de usabilidad encuentra los faciles y – considera otros principios/resultados que influyen dificiles  Principios de usabilidad – Heurísticas de Nielsen (10) • Primer Set ( 1990) Segundo Set (1994) – Lista suplementaria de categorías específicas • Competencia del análisis y pruebas del usuario de productos existentes  Usar las violaciones para redefinir o fijar los problemas Diferencia con la Ingeniería de Usabilidad Heuristicas (original)  H1-1: Diálogo simple y  H1-6: Señalar claramente Barato natural las salidas – No se necesita laboratorios o equipos especializados  H1-2: Hable en el lenguaje  H1-7: Abreviaturas del usuario (shortcuts) Rapido  H1-8: Preciso & mensajes  H1-3: Minimizar la carga de – a lo mas en un 01 dia de errores constructivos memoria del usuario – Una prueba de usabilidad estándar puede durar unas  H1-9: Prevenir errores  H1-4: Consistencia semanas  H1-10: Ayuda y  H1-5: Feedback o documentación Facil de usar retroalimentación – puede ser aprendido en 2 - 4 horas H.1. Diálogo simple y natural H.1. Información justa Cuanto más simple, mejor. Presentar sólo la información que necesita el – Cada elemento es una cosa más a usuario y no más • aprender – en el momento que se necesite • saltarse cuando se busca un elemento concreto – en el lugar que se necesite • posiblemente mal entendido La información que se necesita utilizar Debe encajar de manera natural con la tarea del conjuntamente debe presentarse agrupada usuario – como mínimo, debe aparecer en la misma pantalla – correspondencia elementos informáticos-mundo real – minimizar la navegación por la interfaz. Diaz Muñante Jorge 2
  • 3. Diseño de Interfaces de Usuarios H.1. Secuencia adecuada a las tareas H.1. Organización de la pantalla Los objetos de información se deben mostrar en la Seguir los criterios de la percepción humana: secuencia en la que los usuarios hacen las cosas. – Las cosas se perciben como una unidad si: – No imponer secuencia salvo que sea necesario. • están juntas – Permitir al usuario controlar el diálogo • están rodeadas por líneas o cajas • para adaptar las tareas a sus preferencias • se mueven o cambian a la vez • se parecen con respecto a forma, color, tamaño o tipografía. – Proponer una secuencia sugerida • implícita: secuencia de campos mostrados verticalmente • explícita:secuencia de cajas que se recomienda en una ventana H.1. Organización de la pantalla H.1.Organización de la pantalla Cajas de diálogo con: – opciones agrupadas dentro de la misma caja Cuidado al separar para evitar que elementos similares se consideren asociados – separadas mediante líneas o espacios en blanco a otros. Saldo S/ 10,000 S/ 2,000 ¿cuál es el saldo? ¿ S/ 10,000 ó S/ 2,000? H.1 Organización de la pantalla H.1 Uso de colores en las pantallas Para atraer la atención del usuario Otras recomendaciones con respecto al uso de – TEXTO EN MAYÚSCULAS colores en pantallas: • No hacerlo con mucha frecuencia – No recargarla en colores – Leer texto en mayúsculas es un 10% más lento que uno con mayúsculas • no más de 5 a 7 distintos. y minúsculas • Gris claro y colores pastel mejor como fondos – Objetos parpadeantes – Asegúrate de que se puede usar la interfaz sin colores • SÓLO EN CASOS MUY EXTREMOS • daltónicos, pantallas monocromo – porque es molesto y distrae mucho – El color sólo para categorizar, diferenciar y resaltar • No para dar información (especialmente cuantitativa) Diaz Muñante Jorge 3
  • 4. Diseño de Interfaces de Usuarios H.1. Menos es más (DSN:MEM) DSN:MEM “El rey Harald ordenó construir estos mausoleos en honor  Añadir info y campos de datos a una IU puede distraer de la de Gorm, su padre y Thyre, su madre, progenitores del información más importante. que conquistó por sí solo toda Dinamarca y Noruega e – Normalmente se puede identificar la info importante hizo a los daneses cristianos: el rey Harald.” mediante un análisis adecuado de tareas. • Hacer una pantalla sencilla con esa información [inscripción en una losa, S. X en Dinamarca] • Relegar la demás información a pantallas auxiliares ¿Cuál es el mensaje?  Cualquier información que se presente es algo – que los usuarios tendrán que mirar • reducirá su velocidad de trabajo (fracción de segs.) Ejemplo de un Call Center Ejemplo de una Empresa de RRHH  Antes  Despues  Antes  Despues Los usuarios tenian problemas en La informacion clave ahora esta encontrar la informacion en el Home Page Una aplicacion original tenia 18 80% de llamadas pueden ser pantallas. respondidas en una sola pantalla DSN:MEM DSN:MEM: Estilos de interacción alternativos Evitar información innecesaria que ocupa espacio Reducir funcionalidad <> E.I. Alternativos de pantalla con: – teclado + manipulacíón directa + abreviaturas – Logos de la empresa Alternativas: • mejor al comienzo de la aplicación (además sirve de feedback al usuario) – El usuario debe ser capaz de decidir cuál es la mejor – Número de la versión del sistema en uso – Para aprender: • mejor accesible a través del sistema de ayuda del sistema • Mejor ver 1º el método general (luego ya aprenderán) • los métodos alternativos más tarde – asegurarse de que no confunden a los novatos Diaz Muñante Jorge 4
  • 5. Diseño de Interfaces de Usuarios 2 Hablar el lenguaje del usuario (HLU) 2 Hablar el lenguaje del usuario (HLU) My programagave me the Mi program ha dado el That’s Eso es No, no ... Rsdrd Info No, no… Info rstrgda La terminología se debe basar en el lenguaje del message Rstrd Info. restricted But surely segura Pero estas you can mensaje “Info rstrgda”. informacion stands for “Restricted ¿qué significa? mean? What does it information restringida tell me!!! que eso dice !!! significa información Information” restringida usuario (nunca del sistema) Usar la lengua (idioma) del usuario. Utilizar elementos no verbales como los iconos – no usar palabras poco frecuentes – si los usuarios tienen terminología especializada, se usa It means the que el Eso significa program Ok, voy a take a un Ok, I’ll tomar (mejor palabrás específicas y sin ambigüedad). Hum... Perowhat Hmm… but que is too busyesta muy programa to let you coffee trago significamean??? does it !!! ocupado .. onno log Y – Desde la perspectiva del usuario. puedes ingresar HLU: ¿Cómo conseguir HLU? HLU: Otras maneras ¿Preguntar a los usuarios? El computador admite sinónimos – El desacuerdo verbal garantiza fracaso Permitir uso de alias • Experimento[Furnas et al, 1987] – creados por el usuario Dejar que los usuarios voten entre una serie de – creados por el sistema [Furnas, 1985] posibilidades – Experimento de [Bloom, 1988] HLU:CYM: Metáforas HLU:CYM: Problemas Establecen correspondencia entre: Cuidado de no implicar más de lo que se pretende – el sistema informático de manera inadvertida. – un sistema de referencia conocido por los usuarios – La metáfora debe ser un modelo más simple de un modelo más detallado del sistema y no una representación directa También pueden confundir a los usuarios del mismo. – Máquina de escribir y Procesador de textos Cuidado a la hora de internacionalizar la interfaz – Papelera de reciclaje y borrar archivos – No todas las cosas significan lo mismo en distintas culturas. Diaz Muñante Jorge 5
  • 6. Diseño de Interfaces de Usuarios HLU 3 Minimizar la carga de memoria del usuario (MCM) Computadora es buena: Personas buenas en: – recordar grandes cantidades – reconocer elementos de datos con mucha que se les muestran precisión incluso con ruido de fondo – manejan y cuentan cantidades físicas – detectar eventos inusuales y/o – comportarse de igual manera inesperados incluso sobre grandes espacios de tiempo – adaptar la respuesta física a los cambios de – etc. situación. MCM: ¿Cómo MCM? MCM: ¿Cómo MCM? Mostrar elementos de diálogo a los usuarios Introducción de datos: – Permitirles elegir entre los ítems generados – Describir el formato requerido – Permitirles editar los ítems generados – Dar un ejemplo de entrada de datos legal – MENÚS – Dar un valor por defecto Visibilidad – Recordar rangos de entrada y unidades de medida – Mostrar los objetos de interés para el usuario Entrar fecha: (dd-MMM-aaaa, por. Ej. 08-jun-2012): – ¡OJO! Mostrar demasiados objetos y atributos va en contra del principio menos es más Margen izquierdo: 10 puntos [0-128] MCM MCM Dar formatos en los datos de ingresos. A través de un “Ejemplo” o o datos por omisión Diaz Muñante Jorge 6
  • 7. Diseño de Interfaces de Usuarios MCM 4 Consistencia Uno de los principios más básicos Si un usuario sabe que una acción siempre tiene el mismo efecto se sentirá: – más confiado a la hora de utilizar el sistema – más animado a la hora de probar el sistema mediante exploración porque tiene parte del conocimiento necesario para operar con nuevas partes del sistema. Consistencia en el diseño de la interfaz 5 Feedback (FB) Misma información  misma posición y mismo Informar al usuario de: formato en la pantallla y en las cajas de diálogo – qué se está haciendo Seguir un estándar de diseño de interfaz – cómo se interpreta la entrada que aporta el usuario – cómo indicar que hay disponible un menú emergente (pop- up) Tiempo ¿qué – tipo de letra a utilizar (fuente y tamaño) pasa? >Bajando! > Bajando Tomará 5 para el cafe. minutos... – Dejan muchos grados de libertad a los diseñadores No espere que ocurre un error FB: ¿Cómo? Mejor ¡¡ Refrasear la entrada proporcionada al usuario Hacer la operación y no decir nada – “Archivo a grabar ya existe” –o Diaz Muñante Jorge 7
  • 8. Diseño de Interfaces de Usuarios Una mas reciente FB: Grados de persistencia Corta – El mensaje es relevante mientras ocurre un suceso. El mensaje debe desaparecer una vez que el evento deja de existir. Intermedia – El usuario debe ser consciente del mensaje enviado. Se hace que el usuario reconozca haberlo leído. Larga: – Se convierte en una parte permanente de la interfaz FB: Tiempo de respuesta (TR) FB:TR: 0,1 segundos El Feedback es importante cuando el sistema tiene 00,1 segundos: largos tiempos de respuesta – límite para que el usuario perciba que el sistema está [Miller, 1968; Card et al., 1991] Límites en los reaccionando instantáneamente. tiempos de respuesta de acuerdo con la actitud – No es necesario ningún tipo de feedback. cognitiva del usuario: – Basta con mostrar los resultados – 0,1 segundos – 1,0 segundos – 10,0 segundos FB:TR: 1,0 segundos FB:TR: 10 segundos 01,0 segundos: 10,0 segundos: – límite aproximado para que el flujo de pensamiento no se – límite aproximado de mantenimiento de la atención del interrumpa aunque se perciba retraso usuario sobre el diálogo – No suele ser necesario ningún tipo de feedback (entre 0,1 – Si es superior, el usuario querrá hacer otras tareas y 10 segundos) mientras espera a que el computador termine. – El usuario pierde la sensación de que está operando – El feedback debe indicar cuándo se espera finalizar la directamente con los datos. tarea Diaz Muñante Jorge 8
  • 9. Diseño de Interfaces de Usuarios FB:TR: Variable FB:TR: ¿Cuándo dar feedback? ¿de qué tipo? Variable: En los casos en los que el computador no puede – indicar cuánto tiempo se necesita para acabar la tarea proporcionar una respuesta inmediata. – así el usuario sabe a qué atenerse Si TR > 10 segs ofrecer un indicador de progreso – indican al usuario que no se ha producido fallo en el sistema (no se ha quedado colgado) – indican aproximadamente cuánto tiempo tiene que esperar Contacting host (10-60 seconds) el usuario – proporciona al usuario algo a lo que mirar cancel FB FB Varios archivos se estan copiando, la retroalimentación es archivo por archivo Drawing Board LT FB:TR: No se puede estimar duración FB: Fallos del sistema (FS) indicar cantidad de trabajo que se está realizando indicar, al menos, que se está trabajando Dar feedback informativo Si 2<TR<10 – no usar indicador de progreso Nunca dejar de responder sin un mensaje – utilizar cambios en los cursores – cifras que cambian en una parte de la pantalla Hacer que los sistemas tengan una degradación graciosa Diaz Muñante Jorge 9
  • 10. Diseño de Interfaces de Usuarios 6 Señalizar la salida (SLS) SLS El usuario controla los diálogos si, en cualquier momento, tiene una puerta que signifique ¿cómo interrumpir el proceso actual salgo de – En procesos en los que el TR>10 Tiene esto? Otra manera: funcionalidad de DESHACER 20 segundos para Responder a acciones del usuario antes que a los completarlo “Cancelar” (para dialogos que esperan un ingreso) procesos largos “Deshacer” (permite regresar a un estado previo) Las salidas SIEMPRE VISIBLES “interrumpir” (especialmente para operacione largas) “Salir” (para liberar el programa en cualquier momento) “Omisión” (Para recuperar opciones pre-establecidas) 7 Abreviaturas (ABR) ABR: input con adelanto Para operaciones frecuentes de usuarios No es abreviatura experimentados – El usuario tiene que escribir completamente la entrada – con teclas de función – permite no atender a todos los elementos de diálogo – con teclas especiales (CTRL, ALT, WINDOWS) Se puede usar en interfaces telefónicas – con operaciones del ratón (ejm. doble click) – interrumpir la lista de opciones que se ofrecen También en IGUs - click con adelanto ¡OJO! Peligrosos si se permiten en cualquier circunstancia ABR: Historia de la interacción ABR: Valores por defecto Los usuarios deben poder reutilizar la historia de la Son abreviaturas interacción. – es más rápido reconocer un valor por defecto y aceptarlo – Opciones de menú con los últimos comandos que especificar un valor o una opción – Repetir el último comando de búsqueda – Pueden estar ocultos en una pantalla opcional por si el ususario necesita modificarlos – Visualización de los últimos estados (en IGUs) Ayudan a conocer el sistema Otras abreviaturas – reducen el número de acciones de los usuarios – últimos archivos abiertos – dan indicación del tipo de valores que se pueden – abrir archivos que suelen abrirse conjuntamente especificar de manera legal • más complicados de conseguir Diaz Muñante Jorge 10
  • 11. Diseño de Interfaces de Usuarios 8 Mensajes de error [ERR] ERR: Recomendaciones de uso de los mensajes Las situaciones de error son críticas porque: Lenguaje claro y sin oscuros códigos – representan situaciones en las que el usuario tiene Deben ser precisos (no vagos ni generales) problemas y es posible que no pueda usar el sistema para Ayudar de manera constructiva a resolver el conseguir el objetivo deseado problema – son oportunidades del usuario para comprender mejor el sistema ya que motivan al usuario a prestar atención a los Mensajes educados y no intimidatorios contenidos de los mensajes porque es el computador el – No echar la culpa al usuario que tiene el conocimiento de en qué consiste el sistema – refrasear y hacer que el computador asuma la culpa (como realmente está ocurriendo, porque la interfaz tendría que haber sido diseñada para que no se produjera dicho error). ERR ERR: Recuperación de los errores Resolver los problemas ocasionados por una interacción errónea – Deshacer Ha ocurrido – Editar y relanzar comandos anteriores error 15762 Mensajes de múltiples niveles – Mensajes más cortos y más rápidos de leer – Con acceso a una descripción más detallada [técnica] del error que se ha producido – Normalmente 2 niveles [teóricamente podría haber n, y navegar entre ellos en un hipertexto] ¿cuál es el “error 15762”? 9 Prevenir errores [PE] 10 Ayuda y documentación [AYD] Mejor que proporcionar mensajes de error es evitar  Mejor que el sistema no haga necesaria la utilización de la las situaciones de error. ayuda o documentación. – Teclear algo =>posibles errores tipográficos  Documentación: – Para que los usuarios alcancen más habilidad ¿Cómo conocer las situaciones de error?  Hecho: ¡Los usuarios no leen los manuales! – Evaluación de la interfaz y los usuarios – Sólo en situaciónes de pánico y necesitan ayuda inmediata – Mediante un sistema que apunte los errores cometidos  Por tanto: DOCUMENTACIÓN ON-LINE OBJETIVO: reducir la frecuencia de los errores Volume 2 – sobre todo los que tienen consecuencias serias DIU Diaz Muñante Jorge 11
  • 12. Diseño de Interfaces de Usuarios AYD: Uso de la documentación Los usuarios atraviesan tres estados cuando interactúan con manuales y sistemas de ayuda: – Buscar. Localizar la información relevante para una necesidad específica. – Entender la información. – Aplicar el procedimiento tal y como se describe en la documentación. Segunda categorización heurística Jacob Nielsen 10/06/2012 Heuristicas (revisado) H2-1: Visibilidad del estado del sistema searching database for matches MS Windows: Buscar IE: descarga No estima el tiempo Mejor feedback  H2-1: Visibilidad del estado del sistema – Mantener al usuario informado acerca de lo que esta ocurriendo – ejemplo: prestar atencion al tiempo de respuesta • 0.1 sec: no se requiere indicadores especiales • 1.0 sec: el usuario tiende a perder la hilación • 10 sec: max. duracion de atencion del usuario • para demoras mayores, use barras de progreso con porcentaje de realizacion Heuristicas (cont.) Dialogo simple Compuserve Information Manager File Edit Services Mail Special Window Help  Ejemplo errado: Mac desktop Services – Arrastrar el disco al basurero Telephone Access Numbers PHONES • sera borrado, no arrojado Access Numbers & Logon Instructions  H2-2: Empatar el mundo real y el sistema United States and Canada United States and Canada – hable en el lenguaje del usuario CompuServe Network – Lectura de izq a der y de arriba abajo Only 9600 Baud List – Cosas con proximidad física normalmente están relacionadas entre sí ? List – Cosas de mayor tamaño normalmente son List by: State/Province más importantes Area Code Diaz Muñante Jorge 12
  • 13. Diseño de Interfaces de Usuarios Heuristicas (cont.) H2-3: Control y libertad del usuario  Wizards – debe responder al que undo, reconstruir link al HP Donde estamos antes de ir al siguiente – para tareas no frecuentes • (ejm. configurar el modem) – no para tareas comunes – bueno para los novatos  H2-3: Control y libertad del usuario• tene 02 versiones (WinZip) – “exits” para selecciones equivocadas, undo – no forzar a pasos rigidos Heuristicas (cont.) Heuristicas (cont.)  MS Web Pub. Wiz.  H2-5: Prevencion de errores  Antes de conectarse – pregunta por id & password  H2-6: Reconocimieno antes que re-llamar  Cuando se conecta H2-4: Consistencia y estandard – Hacer objetos, acciones y – pregunta otra vez por id & direcciones visibles y faciles pw de recuperación Heuristicas (cont.) Heuristicas (cont.) Ctrl + C  H2-7: Flexibilidad y eficiencia en el uso – aceladores para expertos (shortcuts)  H2-8: Diseño estetico y minimalista – permitir a los usuarios abreviar acciones frecuentes (ejm. – No incluir informacion no importante en los dialogos macros) Diaz Muñante Jorge 13
  • 14. Diseño de Interfaces de Usuarios Heuristicas (cont.) Heuristicas (cont.) H2-10: Ayuda y documentación – facil para buscar – focalizado sobre las tareas del usuario – lista concreta con los pasos a realizar – no muy extenso H2-9: Ayuda para que el usuario reconozca, diagnostique y se recupere de errores – mensajes de error con lenguaje sencillo – indicar con precision el problema – Sugerir una solucion Fases de EH ¿cómo desarrollar la evaluación? 1) Entrenamiento de pre-evaluacion  Al menos en 02 pasos por cada evaluador – dar a los evaluadores el conocimiento e información – primero dar un “feel” y objetivo del sistema necesaria sobre el escenario – segundo, focalizar sobre elementos especificos 2) Evaluacion  Si el sistema es instale_use o los evaluadores son expertos, – evaluación individual y luego agrupar los resultados no necesita asistencia 3) Clasificación de severidad – caso contrario ayudar a los evaluadores con escenarios – determinar el grado de severidad de cada problema  Cada evaluador produce una lista de problemas (prioridad) – explicar la referencia heuristica u otra información 4) Resumen – ser especifico y listar cada problema por separado – discutir los resultados con el grupo de diseño Ejemplos ¿cómo desarrollar la evaluación? No puede copiar informacion desde una ventana a ¿Porque listados por cada violación? otra – Riesgo de repetir aspectos problemáticos – viola “Minimizar la carga en la memoria al usuario” (H1-3) – puede no ser fácil solucionar todos los problemas – solucion : permitir el copiado donde los problemas pueden ser encontrados Tipografia: usa mezcla de minusculas y mayusculas – en un solo lugar del IU en los formatos y fonts – 02 o más lugares que necesitan ser comparados – viola “Consistencia y estandard” (H2-4) – problemas con estructuras generales de IU – solucion: un formato simple para toda la interfaz Diaz Muñante Jorge 14
  • 15. Diseño de Interfaces de Usuarios Clasificación de severidad Clasificación de severidad (cont.) Usado para distribuir los recursos a la solución de 0 - Difiere al conjunto de heurística los problemas 1 - problema cosmético Estimar el esfuerzo necesario para una mayor 2 - problema de usabilidad mínimo usabilidad 3 - problema de usabilidad mayor; importante para Combinación de solucionarlo – frequencia 4 - Usabilidad catostrófica; obligatorio su solución – impacto – persistencia (una vez o repetitivo) Debe ser calculado despues que todos los evaluadores terminen Debe ser hecho independiente Factores de severidad Resumen Frecuencia.  Realizado con los evaluadores, observadores, y los miembros de desarrollo – Raro o comun el problema  Discutir las caracteristicas general del IU Impacto  sugerir mejoras potenciales para mejorar los problemas de – Cuando ocurre si es dificil recuperarse usabilidad Persistencia  Desarrollar ratios de las cosas que son dificiles de solucionar – Si el usuario repite el error.  Hacer una sesión de tormenta de ideas – crítico hasta finalizar la sesión Ejemplos de clasificación de severidad EH vs. Prueba del Usuario  EH es mucho más rápido – 1-2 horas por cada evaluador vs. Dias-semanas 1. [H1-4 Consistencia] [Severidad 3][solución 0]  EH no requiere interpretar las acciones del usuario La interfaz usa la palabra “guardar” en la primera pantalla  La prueba del usuario es mucho mas detallada (por para guardar un archivo del usuario, pero se usa las definición) palabras “escribir el archivo” en la segunda pantalla. Los – toma en cuenta los usuarios actuales y sus tareas usuarios puede confundirse por esta diferencia en la – EH puede perder problemas y encontras “falsos terminología para la misma función. problemas”  Es bueno alternar entre EH y prueba del usuario – Encontrar diferentes problemas Diaz Muñante Jorge 15
  • 16. Diseño de Interfaces de Usuarios Resultado de usar EH Resultados de usar EH (cont.) Disminución: ratio costo-beneficio de 48 [Nielsen94] Un solo evaluador restringe a pobre resultado – cost puede ser $10,500 para un beneficio de $500,000 – solo puede encontrar el 35% de problemas usabilidad – valor de cada problema ~15K (Nielsen & Landauer) – 5 evaluadores encuentran ~ 75% de problemas de – ¿cómo llegamos a calcular este valor? usabilidad • En-casa -> productividad; abrir el negocio -> ventas – ¿por qué no más evaluadores? 10? 20? • Adicionar evaluadores es mayor costo Correlacion entre la severidad y el hallazgo de • muchos evaluadores no implica que encuentren mucho mas problemas HE problemas Retorno decreciente Resumen EH es un método barato Encontrar problemas Costo/beneficio Los evaluadores revisan la IU Tarea ¿qué no se cumple con las heurísticas? Combinar la busqueda entre 03 a 5 evaluadores Tener evaluadores con clasificación de errores independientes Discutir los problemas con el grupo de diseño Alternar con pruebas del usuario Gráfico para un ejemplo específico Diaz Muñante Jorge 16