Actividades del proceso de diseño de interfaz

  • 1. Análisis del usuarioOpen or Close

    Consiste en identificar las tareas que desempeñará el usuario con el aplicativo desarrollado. Aquí intervienen algunas técnicas dentro de las cuales se destacan: entrevista, etnografías y análisis de tareas.

    • Análisis de tareas: esta sirve para identificar lo que va a hacer el usuario para desarrollar una función. Visualmente se representa como una jerarquía de tareas, donde cada nivel hace parte de las actividades en detalle que deben realizarse. En sus inicios esta técnica ayudaba en la construcción del manual del usuario.
    • Entrevista: con esta se obtiene información ya sea de manera individual o de manera grupal. Cuando se realiza con varios usuarios sirve para generar discusiones y opiniones respecto al aspecto de la interfaz. Se cuenta con una lista previa de preguntas; también se pueden tener preguntas abiertas y se le permite al usuario expresar libremente lo que hacen. Excelente técnica para generar discusión entre los participantes.
    • Etnografía: en esta se considera cómo interactúa el usuario, cómo es la organización de su entorno de trabajo y usualmente cómo cooperan para resolver problemas.
  • 2. PrototipoOpen or Close

    Permite que el usuario interactúe con el aplicativo a medida que este se va diseñando. Experimentan directamente cómo será el comportamiento del sistema.

    Los prototipos pueden ser de dos tipos:

    • En papel: representan en maquetas las pantallas que le permiten al usuario visualizar cómo será el aplicativo.
    • Automatizados: el usuario interactúa todo el tiempo con el aplicativo haciendo pruebas. Se experimentan simulaciones de su comportamiento.

    Una herramienta para la construcción de prototipo es: Balsamiq Mockups 3.5 (link de descarga gratis: https://balsamiq.com/download/). Esta herramienta será la que se utilizará para la construcción de prototipos. Su proceso de instalación es fácil y rápido. Se debe estar atento a la información que va solicitando y hacer clic en la opción adecuada. Una vez se termina el proceso de instalación, este abrirá la ventana para su utilización como se visualiza en la imagen.

    Imagen 1. Ventana principal Balsamiq.

    (Para ampliar la imagen haga clic sobre ella)

    Una vez ha ingresado al aplicativo Balsamiq, en la parte izquierda encuentra las hojas en blanco que en este caso serán las ventanas del aplicativo. En la parte superior se ubican los elementos que hacen parte de las ventanas, comenzando por navegadores, botones, íconos, imágenes, etiquetas, link, figuras, cajas de texto y scrollbar, entre otras.

  • 2.1. Construcción de prototipos con Balsamiq Mockups 3.5Open or Close

    Realicemos el siguiente ejemplo paso a paso:

    Prototipo de una aplicación, la cual se compondrá de: una ventana de logueo, una ventana de menú y una ventana con un formulario para registro.

    1. Ingresar a Balsamiq.
    2. Project / save Project as/ asigna nombre.
    3. En el mockup en blanco/ clic derecho en rename/ define nombre logueo/ rename.
    4. Arrastra un objeto Windows.
    5. Arrastrar en el mockup dos cajas de textos, dos etiquetas y dos botones.
    6. Las etiquetas son usuario y contraseña.
    7. Los dos botones son aceptar y cancelar.
    8. Doble clic sobre la ventana asignar el nombre de registro.
    9. Ctrl+N para crear una nueva ventana.
    10. En el mockup en blanco/ clic derecho en rename/ define nombre menú/ rename.
    11. Arrastra un objeto Windows.
    12. Arrastra en el mockup un objeto radio button y un botón.
    13. En el radio button colocar el texto formulario, en el botón poner salir.
    14. Doble clic sobre la ventana asignar el nombre de menú.
    15. Devuélvase a la ventana de logueo.
    16. Seleccione el botón aceptar, en la parte derecha clic en links, en el menú desplegable seleccionar menú.
    17. Sobre el botón de aceptar, aparecerá una flecha de color rojo indicando que tiene hipervínculo a una ventana.
    18. Ctrl+N para crear una nueva ventana.
    19. En el mockup en blanco/ clic derecho en rename/ define nombre formulario/ rename.
    20. Arrastra un objeto Windows.
    21. Arrastra en el mockup un objeto imagen, tres etiquetas, tres cajas de texto, un botón y un objeto address card y un objeto link.
    22. Doble clic sobre la ventana asignar el nombre de formulario.
    23. Las etiquetas son nombre, apellido, cédula y el botón aceptar. En el objeto link en la parte derecha clic en links, link to web address, ingrese la siguiente dirección http://www.umng.edu.co/facultad-de-estudios-a-distancia , ok
    24. Devuélvase a la ventana de menú.
    25. Seleccione el radio button, en la parte derecha clic en links, en el menú desplegable seleccionar formulario.
    26. Ubíquese en la ventana de logueo y en la parte superior clic en la flecha que apunta a la derecha.
    27. De esta forma se ejecutan las ventanas y le permite al usuario interactuar entre las ventanas y hacer clic en botones.
    28. Click en Project/ export to pdf/ a set of mockups/marcar todos los checks, export to pdf.
    29. Se generó un archive pdf que puede ser enviado al usuario para que lo manipule y pruebe cómo funciona la aplicación.

    En la siguiente imagen se muestra cómo quedaron las ventanas creadas desde Balsamiq.

    Imagen 2. Prototipo Balsamiq.

    (Para ampliar la imagen haga clic sobre ella)

    Otros aplicativos gratis para la construcción de prototipos son:

    • Evolus pencil.
    • Mockus plus.
    • Draw.io.
    • Microsoft Visio.
  • 3. EvaluaciónOpen or Close

    Es un proceso constantemente que se realiza en todo el aplicativo, pero se hace necesario realizar otras validaciones sobre la interfaz. Las técnicas más frecuentes para este caso son los cuestionarios, donde el usuario plasma sus opiniones y la observación permite identificar cómo trabaja el usuario y utiliza el sistema (Sommerville, 2010).

    Por otro lado, se debe tener en cuenta la aplicación de los usos del sistema por medio de un video y el control del código con errores comunes y los recursos más utilizados.

    Una buena forma de evaluar es por medio de los atributos de usabilidad, estas cualidades permiten identificar el buen y correcto uso que se le dará al aplicativo: aprendizaje, velocidad de funcionamiento, robustez, recuperación y adaptación.

    El aprendizaje que no es otro que conocer cuánto tiempo le toma al usuario ser más productivo con el sistema. Otro es la velocidad de funcionamiento, para saber cómo responde el sistema a las operaciones que se realicen en un determinado tiempo. La robustez es comprender si el sistema tolera los errores del usuario y cómo se recupera de los mismos y por último, la adaptación del aplicativo al ritmo de trabajo del usuario.