Diseño de interfaz de usuario

De Wikipedia, la enciclopedia libre
La interfaz gráfica de usuario se presenta (visualiza) en la pantalla de la computadora. Es el resultado de la entrada del usuario una vez procesada y, normalmente, es la principal interfaz de interacción entre el humano y la máquina. La interfaz táctil tan popular en pequeños dispositivos móviles son una superposición de la salida visual a la entrada visual.

El diseño de interfaz de usuario o ingeniería de la interfaz es el resultado de definir la forma, función, utilidad, ergonomía, imagen de marca y otros aspectos que afectan a la apariencia externa de las interfaces de usuario en sistemas de todo tipo (computadoras de uso general, sistemas de control, dispositivos de comunicación móviles, software de sistemas, software de aplicaciones, sitios web, etc). El diseño de la interfaz de usuario es una disciplina asociada al diseño industrial (aparece como tal recogido en la Clasificación de Locarno en el apartado 14-04) y se enfoca en maximizar la usabilidad y la experiencia de usuario. El objetivo final del diseño de la interfaz de usuario es hacer que la interacción entre el usuario y el sistema del que es interfaz sea tan simple y eficiente como sea posible, en términos de cumplimiento de los objetivos del usuario. Sigue por ello una filosofía de diseño centrado en el usuario.

Un buen diseño de la interfaz de usuario facilita la compleción de tareas a realizar sin que el usuario vea atraída su atención hacia la forma. El diseño gráfico y la tipografía se combinan para ofrecer usabilidad, influyendo en cómo el usuario realiza ciertas interacciones y mejorando la apariencia estética del diseño; la estética del diseño puede mejorar o dificultar la capacidad de los usuarios para utilizar las funciones de la interfaz.[1]​ El proceso de diseño debe balancear la funcionalidad técnica y los elementos visuales (es decir, el modelo mental) para crear un sistema que no solo sea operativo, sino también usable y adaptable a la evolución de las necesidades del usuario.

Normalmente el diseño de interfaces de usuario es una actividad multidisciplinar que involucra a varias ramas tales como el diseño gráfico, el diseño industrial, el diseño web, el diseño de software y la ergonomía; y puede aparecer como actividad en un amplio rango de proyectos, desde el desarrollo de sistemas informáticos hasta el desarrollo de aviones comerciales. En este sentido las disciplinas del diseño industrial y diseño gráfico se encargan de que la actividad a desarrollar se comunique y aprenda lo más rápidamente, a través de recursos como los gráficos, los pictogramas, los estereotipos y la simbología, todo sin afectar un funcionamiento técnico eficiente.

El diseño de interfaces interviene en una amplia gama de proyectos, desde sistemas informáticos hasta automóviles y aviones comerciales;[2][3][4]​ todos estos proyectos implican en gran medida las mismas interacciones humanas básicas, pero también requieren algunas habilidades y conocimientos únicos. Como resultado, los diseñadores tienden a especializarse en ciertos tipos de proyectos y tienen habilidades basadas en su experiencia, ya sea desarrollo de software, investigación de usuarios, diseño web o diseño industrial.

Procesos de diseño de una interfaz de usuario[editar]

Plantilla para diseño de una app de móvil y escritorio.

El diseño de la interfaz de usuario requiere de una buena comprensión de las necesidades del usuario. Hay varias fases y procesos en el diseño de una interfaz de usuario, algunos de los cuales son más demandados que otros, dependiendo del proyecto.[5]​ Nota: en lo que resta de sección, la palabra sistema se utilizará para referirse a cualquier tipo de proyecto, ya sea éste para el desarrollo de una web, una aplicación o dispositivo.

  • La ingeniería de requisitos - elaboración de una lista de los elementos funcionales requeridos por el sistema para que cumpla los objetivos del proyecto y las necesidades potenciales de los usuarios.
  • El análisis del perfil de los usuarios y las tareas - un tipo de trabajo de campo que consiste en la actividad de análisis de los usuarios potenciales del sistema, estudio de la forma en la que realizan las tareas que el diseño debe permitir, y realización de las entrevistas que permitirán determinar sus objetivos.[6]​ Con preguntas habituales como:
    • ¿Qué querría el usuario que haga el sistema?
    • ¿Cómo encajaría el sistema en el flujo de trabajo o las actividades diarias?
    • ¿Cuán competente es el usuario técnicamente y qué sistemas parecidos ya utiliza?
    • ¿Qué estilos de aspecto y comportamiento son los preferidos del usuario?
  • Arquitectura de la información - desarrolla un flujo de información y/o procesos del sistema (por ejemplo, en un sistema de desvío automático de llamadas, podría ser diagrama de flujo en forma de árbol de opciones, o en un sitio web la jerarquía de páginas que muestra el uso del sitio).
  • Prototipado - desarrollo de un esquema de página, ya sea en forma de prototipo en papel o de pantallas interactivas simples. En estos prototipos se evita la utilización de los elementos de estilo, aspecto y comportamiento, así como la mayor parte del contenido de forma que el analista pueda concentrarse en la interfaz.
  • Inspección de la usabilidad - permitir que un evaluador inspeccione la interfaz de usuario. Este método se considera que es normalmente más fácil de implementar que las pruebas de usabilidad (véase el siguiente proceso), y puede utilizarse en las etapas tempranas del proceso de desarrollo de la interfaz de usuario ya que puede utilizarse para evaluar tanto prototipos como especificaciones del sistema que habitualmente no pueden ser evaluados con los usuarios finales. Algunos de los métodos comunes de inspección de la usabilidad incluyen el recorrido cognitivo, que se enfoca en la simplicidad del sistema para los nuevos usuarios, la evaluación heurística, en la que se utilizan un conjunto de heurísticas para identificar problemas de usabilidad en el diseño de la interfaz de usuario, y la revisión participativa del diseño, en la que se selecciona un grupo de gente para recorrer el sistema en un escenario típico de uso y discutir los problemas de usabilidad.
  • Pruebas de usabilidad - prueba de uno o varios prototipos con un usuario real—con frecuencia utilizando una técnica denominada "protocolo de pensar en alto", en el que se pide al usuario que exprese en voz alta lo que piensa mientras experimenta la interacción con el sistema. Las pruebas de usabilidad del diseño de una interfaz permiten que el diseñador entienda cómo es percibido el sistema desde la perspectiva del usuario, y así facilita la obtención de aplicaciones exitosas.
  • Diseño de la interfaz gráfica de usuario - realización del diseño final con sus elementos de estilo, aspecto y comportamiento de la interfaz gráfica de usuario (GUI). Puede basarse en los elementos desarrollados en fases anteriores, una vez éstos han sido refinados para resolver los problemas de usabilidad encontrados durante la fase de pruebas de usabilidad.[7]​ Dependiendo de la interfaz que se esté creando, este proceso típicamente implica algo de programación informática orientada a validar formularios, establecer enlaces o realizar una acción requerida.[8]
  • Mantenimiento de software - Después del despliegue de una nueva interfaz, puede que sea necesario ocasionalmente mantener el software que la implementa para resolver bugs, adaptar características o actualizar completamente un sistema. Una vez se decide actualizar la interfaz, el sistema heredado volverá a requerir de un nuevo proceso de diseño, y será necesario repetir las distintas fases del ciclo de vida de la interfaz.[9]

Principios y requisitos de diseño de una interfaz de usuario[editar]

Las características dinámicas de un sistema se describen en términos de requisitos diálogo que aparecen definidos en los siete principios de diálogo del capítulo 10 del estándar ISO 9241 sobre ergonomía de la interacción persona-sistema.[10]​ Este estándar establece una serie de conceptos y elementos básicos de ergonomía que suponen un punto de partida para facilitar el diálogo entre los sistemas y las personas que usan dichos sistemas, con definiciones de alto nivel, aplicaciones ilustrativas y ejemplos de los principios definidos. Los principios aplicables representan los aspectos dinámicos de la interfaz y pueden considerarse, de forma general, como la "sensación" que produce la interfaz.

Los siete principios son los siguientes:

  • Adecuación a la tarea: el diálogo es adecuado a la tarea cuando asiste al usuario en la compleción eficaz y eficiente de la tarea.
  • Carácter autodescriptivo: el diálogo es autodescriptivo cuando cada paso del diálogo es inmediatamente comprensible ya sea mediante la información devuelta por el propio sistema o por una explicación a solicitud del usuario.
  • Conformidad con las expectativas del usuario: el diálogo es conforme con las expectativas del usuario cuando es consistente y se ajusta a las características del usuario, tales como conocimiento de la tarea, educación, experiencia, y otros convenios comúnmente aceptados.
  • Adecuación al aprendizaje: el diálogo es adecuado al aprendizaje cuando ofrece soporte y guía para que el usuario aprenda a utilizar el sistema.
  • Controlabilidad: el diálogo es controlable cuando el usuario es capaz de iniciar y controlar la dirección y ritmo de la interacción hasta el punto en el que la tarea ha sido completada.
  • Tolerancia a errores: el diálogo es tolerante a errores si, con independencia de que haya errores de la entrada, el resultado pretendido puede ser alcanzado sin acción necesaria por parte del usuario, o con una acción mínima.
  • Personalizable: el diálogo es personalizable cuando la interfaz de software puede ser modificada para ajustarse a las necesidades de la tarea, preferencias individuales, y habilidades del usuario.

El concepto de usabilidad es definido en el estándar a partir de la eficacia, eficiencia de la interfaz, así como de la satisfacción del usuario. El capítulo 11 del estándar ofrece la siguiente definición de usabilidad:

"La usabilidad es la medida con la que un producto se puede usar por usuarios determinados para conseguir objetivos específicos con eficacia, eficiencia y satisfacción en un contexto de uso concreto."

  • La eficacia o efectividad mide la extensión (exactitud e integridad) con la que se alcanzan globalmente los objetivos de uso del sistema.
  • La eficiencia mide los recursos que deben utilizarse para alcanzar los objetivos pretendidos.
  • La satisfacción es un factor subjetivo que mide hasta donde el usuario encuentra globalmente al sistema aceptable.

La eficacia, la eficiencia y la satisfacción se pueden considerar como factores de calidad de la usabilidad. La evaluación de estos factores necesita de una descomposición adicional en subfactores y, finalmente, en métricas de usabilidad.

La presentación de la información se describe en el capítulo 12 del estándar, con cuestiones que afectan a la organización de la información (disposición, alineado, agrupado, etiquetas, localización), a la visualización de objetos gráficos, y a la codificación de la información (abreviaturas, color, tamaño, forma, claves visuales) mediante siete atributos. Los "atributos de la información presentada" representan los aspectos estáticos de la interfaz y pueden ser generalmente considerados como la "apariencia" de la interfaz. Los atributos se detallan en las recomendaciones ofrecidas por el estándar. Cada una de las recomendaciones se enlaza con uno de esos siete atributos.

Los siete atributos de presentación son los siguientes:

  • Claridad: el contenido de la información es presentado de forma rápida y precisa.
  • Discriminabilidad: la información visualizada puede ser distinguida de forma precisa.
  • Concisión: los usuarios no son sobrecargados con información irrelevante.
  • Consistencia: el diseño es único y conforme a las expectativas del usuario.
  • Detectabilidad: la atención del usuario es dirigida hacia la información necesaria.
  • Legibilidad: la información es fácil de leer.
  • Comprensibilidad: el significado es claramente inteligible, no ambiguo, interpretable y reconocible.

En el capítulo 13 del estándar, describe como la información de guía al usuario debe ser distinguible del resto de información visualizada y como debe ser específica al contexto actual de uso. La información de guía puede ofrecerse mediante:

  • Mensajes que indiquen de forma explícita (mensajes específicos) o implícita (mensajes genéricos) que el sistema está esperando a que el usuario introduzca información.
  • Información de respuesta que confirme al usuario su selección o entrada de forma perceptible, no intrusiva y adecuada en el tiempo.
  • Información de estado que indique que el la aplicación continúa funcionando normalmente, así como el hardware del sistema, los componentes de software y las actividades del usuario.
  • La gestión de errores que incluya la prevención de errores, la corrección de errores, la necesidad de que el usuario tome una decisión para gestionar los errores, y los mensajes de error.
  • El sistema de ayuda en-línea tanto para las peticiones iniciadas por el sistema como para las peticiones iniciadas por el usuario, con información específica y adecuada al contexto de uso actual.

Comparado con el diseño UX[editar]

En comparación con el diseño UX, el diseño UI está más relacionado con la superficie y la apariencia general del diseño.[11][12]​ El diseño de interfaces de usuario es un oficio en el que los diseñadores cumplen una importante función en la creación de la experiencia del usuario. El diseño de la interfaz de usuario debe informar a los usuarios de lo que está ocurriendo, proporcionándoles información adecuada en el momento oportuno.[13]​ El aspecto visual del diseño de la interfaz de usuario marca la pauta de la interacción con el usuario.[14]​ Por otro lado, el término diseño UX se refiere a todo el proceso de creación de una interfaz de usuario.[15]

Decían Don Norman y Jakob Nielsen: Es importante distinguir la experiencia global del usuario de la interfaz de usuario (UI), aunque la UI es obviamente una parte extremadamente importante del diseño. Como ejemplo, veamos un sitio web de críticas de cine. Aunque la interfaz de usuario para buscar una película sea perfecta, será deficiente para un usuario que necesite información sobre un pequeño estreno independiente si la base de datos subyacente sólo contiene películas de los grandes estudios.[16]

Véase también[editar]

Referencias[editar]

  1. Norman, D. A. (2002). «Emotion & Design: Attractive things work better». Interactions Magazine, ix (4). pp. 36-42. Archivado desde el original el 8 de abril de 2018. Consultado el 20 de mayo de 2018. 
  2. «User interface design». tushdesh.wordpress.com. Consultado el 6 de abril de 2024. 
  3. «Breaking News: UX is not UI. And that isn’t a bad thing!». dorve.com. Consultado el 6 de abril de 2024. 
  4. «What is UI Design? A 2024 Guide to User Interface Design». hapy.design. Consultado el 6 de abril de 2024. 
  5. Wolf, Lauren (23 de mayo de 2012). «6 Tips for Designing an Optimal User Interface for Your Digital Event». INXPO. Archivado desde el original el 16 de junio de 2013. Consultado el 22 de mayo de 2013. 
  6. Ann Blandford. «Semi-structured qualitative studies». The Encyclopedia of Human-Computer Interaction, 2nd Ed. Interaction Design Foundation. Consultado el 20 de mayo de 2018. 
  7. Karen Holtzblatt and Hugh R. Beyer. «Contextual design». The Encyclopedia of Human-Computer Interaction, 2nd Ed. Interaction Design Foundation. Consultado el 20 de mayo de 2018. 
  8. Martin Fowler. «Forms and controls». GUI architecture. thoughtworks publication. Consultado el 20 de mayo de 2018. 
  9. «8 Stages in an HL7 Interface Lifecycle - Caristix». Caristix. 5 de octubre de 2010. Consultado el 20 de mayo de 2018. 
  10. «Ergonomic requirements for office work with visual display terminals (VDTs)». www.iso.org. Consultado el 20 de mayor de 2018. 
  11. «The Difference Between UX and UI Design: A Beginner’s Guide». careerfoundry.com. Consultado el 6 de abril de 2024. 
  12. «The difference between UX and UI, according to designer and Maze CEO, Jonathan Widawski». maze.co. Consultado el 6 de abril de 2024. 
  13. «UX 101: Nielsen's 10 Usability Heuristic Principles for User Interface Design (1-5)». dev.to. Consultado el 6 de abril de 2024. 
  14. «User Interface and User Experience (UI/UX) Design». gistbok-topics.ucgis.org. Consultado el 6 de abril de 2024. 
  15. «Web-Design-Agentur». dartera.ch. Consultado el 6 de abril de 2024. 
  16. «The Definition of User Experience (UX)». www.nngroup.com. Consultado el 6 de abril de 2024. 

Enlaces externos[editar]