Si bien todos los elementos de una solución software son críticos por la importancia de los mismos, en el caso de la interfaz de usuario probablemente nos encontremos ante uno de los más sensibles, pues a diferencia del resto de componentes (lógica de negocio, middleware, etc.), en este caso nos encontramos ante la cara visible de la aplicación y, por tanto, ante el único punto de contacto entre ésta y las personas que la usarán. En este sentido, la filosofía de diseño centrado en el usuario, es la que mejores resultados está proporcionando.

Mientras que en la época de cliente/servidor las herramientas con las que contábamos a la hora de diseñar interfaces eran, por un lado "inteligentes" (pues incluían lógica) y, por otro, muy estandarizadas, en la época de Internet y las aplicaciones distribuidas nos hemos encontrado ante evidentes dificultades técnicas (falta de tecnología, incompatibilidad ante la diversidad de navegadores y clientes, etc.) que no nos han permitido proporcionar una experiencia de usuario aceptable.

Ventajas

Esto nos había conducido a situaciones donde el rendimiento de los usuarios había caído notablemente, y era necesario hacer fuertes inversiones en formación para salvar el gap de usabilidad. Adicionalmente, las llamadas a los call-centers y centros de atención al cliente se multiplicaban, pues el usuario se sentía desorientado o no sabía la forma en la que proceder. Eso por no hablar de la pérdida de ingresos derivada de ese bajo rendimiento, o bien, en el caso de aplicaciones directamente expuestas al usuario final donde éste interactúa directamente con el negocio, de los abandonos en el uso de la aplicación y, por tanto, de la pérdida de ventas directas.

Actualmente, el contexto ha mejorado sustancialmente. Si bien continuamos con una diversidad importante de navegadores (Explorer, Firefox, Opera, Safari, etc.) y clientes (PC, teléfonos móviles, PDA, etc.), XML, JavaScript y CSS bajo el paraguas de Ajax, han sido las tecnologías encargadas de estandarizar la forma en la que es posible desarrollar aplicaciones ricas y fáciles de utilizar. Otras formas que proporcionan mayor experiencia multimedia, como Flash, OpenLaszlo o el más reciente Silverlight, están contribuyendo a que, por fin, el desarrollo de RIA sea una realidad.

Interfaz de usuario no es sólo tecnología

Proceso de creación de una Interfaz de Usuario

Debemos prestar mucha atención y poner mucho cuidado a la hora de elaborar una interfaz de usuario, pues la tecnología no es más que un elemento de soporte, pero ni el más importante, ni el único.

Si la forma en la que se presenta la información al usuario está mal pensada, da igual la tecnología que tengamos por debajo, pues el usuario seguirá sin entender cómo obtener la información que requiere (por muy bonito que lo mostremos).

Teniendo bien pensada la forma en la que queremos estructurar la información, es decir, habiendo hecho una buena Arquitectura de Información, el siguiente paso es analizar y definir los elementos de interacción. La típica pregunta de ¿Qué debemos utilizar, un Combo Box o unos Radio Buttons? (pues funcionalmente cumplen con el mismo objetivo), no posee una respuesta obvia y requiere de un análisis del problema de usabilidad que tengamos delante. No es lo mismo que esa interacción se presente en un cuadro de diálogo que en una barra de herramientas. Si bien el patrón general en este caso puede ser el número de opciones a presentar (si son menos de cuatro opciones, tiene sentido poner Radio Buttons, si son más, entonces habrá que decidirse por un ComboBox), no siempre la aplicación de la regla será la misma.

Por tanto, el diseño de una buena interacción utilizando los estándares de HCI es el segundo paso crítico a la hora de abordar con éxito el diseño de una interfaz. Aquí es donde la tecnología sí nos puede ayudar, pues nos puede proporcionar unas herramientas de interacción u otras pero, por encima de todo, debemos pensar en el usuario y en la experiencia que experimentará éste a la hora de utilizar nuestra aplicación, buscando en todo momento la simplicidad y no hacerle pensar más de lo estrictamente necesario.

Finalmente, la imagen corporativa es un elemento importante también y abordar la aplicación del diseño gráfico a la interfaz de una forma metódica, es un elemento clave para conseguir coherencia y, con ella, conseguir los objetivos de imagen que se pretenden.

Es importante tener en cuenta que el diseño de la interfaz (con todas sus fases) es necesario abordarlo desde el principio del proyecto, prototipando e iterando cuantas veces sea necesario, y no relegar el diseño de la interfaz a una de las fases de desarrollo.

Sólo de este modo conseguiremos al final obtener el mejor producto posible y sólo así se manejarán de forma correcta las expectativas de todos los implicados en el proyecto, incluídos los usuarios finales. Por tanto, las fases que se describen a continuación y que son las que utilizamos en Kynetia para el desarrollo de la interfaz, hay que verlas ubicadas dentro del contexto general del proyecyto, y no sólo como una parte de éste.

Arquitectura de la información

Como hemos comentado más arriba, si deseamos obtener la máxima usabilidad y la mejor experiencia de usuario, también de acuerdo con la propia definición de The Information Architecture Institute, es necesario realizar una arquitectura de información antes de proceder con el diseño de la interacción o de los gráficos de la interfaz (es decir, la pantalla que finalmente visualizará y manejará el usuario final).

El diseño de la arquitectura de información es una fase que se encuentra dentro del diseño de la arquitectura de la aplicación en particular y de la Enterprise Architecture en general.

Diseño de la Interacción (HCI)

Consiste en un conjunto de técnicas encaminadas a conseguir que el software sea más intuitivo y fácil de manejar por parte de sus usuarios. HCI se centra en la parte de interacción, mientras que los servicios de Diseño Gráfico de la Interfaz se centran en la presentación gráfica (colores, fuentes, etc.). Por este motivo, el proceso de diseño de HCI suele ser una fase previa al diseño gráfico de la interfaz, aunque a partir de la primera iteración suelen entremezclase ambos. Las principales etapas son: Investigación, Concepto, Diseño, Test de usuario e Implementación.

• Investigación. Se trata de conocer las personas que utilizarán la aplicación, así como el contexto en el que será utilizada. Esto permitirá a los diseñadores de interacción entender tanto las necesidades de los usuarios, como los condicionantes que posean. De esta fase se concluye con una lista de requisitos que abarcan dos escenarios diferentes: los requisitos de los usuarios y los requisitos técnicos.
• Concepto. Una vez que se cuenta con los requisitos, es necesario conceptualizar las diferentes ideas y ver cuáles de ellas se ajustan de la mejor forma posible a las necesidades de los usuarios y del negocio. Ese es el objetivo de esta fase.
• Diseño. Finalizada la conceptualización de la idea, se procede con el diseño de la interfaz. Esta fase cuenta con tres etapas: Definición de la interacción (con el fin de crear un marco de trabajo donde la interacción tiene lugar), Definición de los elementos de interacción (menús, botones, formularios, etc. que darán soporte a la interacción) y Prototipo (para comprobar la validez del diseño).
• Test de usuario. Dado que ya contamos con el prototipo, es necesario realizar test de usabilidad XGLOSARIOX con los usuarios, con el fin de comprobar que la solución propuesta satisface las necesidades perseguidas y se encuentra a la altura de las expectativas. Normalmente, se encuentran mejoras a incorporar y, por tanto, se realizan diferentes iteraciones volviendo a la fase de concepto. Una vez concluidas las iteraciones que garantizan el cumplimiento de las expectativas de los usuarios, se procede con la siguiente fase.
• Implementación. Consiste en la incorporación de la solución de interacción dentro de la aplicación que se está desarrollando.

Diseño Gráfico de la Interfaz

El proceso de Diseño Gráfico de la Interfaz del usuario se entremezcla con el proceso de HCI Design para dar como resultado la interfaz que finalmente el usuario utilizará para interaccionar con la aplicación.
Normalmente el proceso consiste en dos fases iterativas: desarrollo del libro de estilo e implementación del diseño

• Creación del libro de estilo. Consiste en crear una serie de directrices que regulan la casuística gráfica de la aplicación. En ocasiones, se trata de una extensión del libro de estilo creado dentro de la Enterprise Architecture, mientras en otra, se crea partiendo desde cero. Tradicionalmente contiene los siguientes elementos:
  • Guía de arquitectura de información
  • Uso de los logotipos
  • Cabecera de la aplicación
  • Pie de la aplicación
  • Plantillas a utilizar para el desarrollo de la interfaz
  • Paleta de colores
  • Tipografía
  • Imágenes y media
  • Accesibilidad
  Se trata de un proceso iterativo que en la mayor parte de las veces se entremezcla con el proceso de HCI. Adicionalmente, las fases de creación son prácticamente idénticas a las de HCI, pero ahora, desde el punto de vista gráfico 
• Implementación diseño de interfaz. Una vez que se ha concluido con la creación del libro de estilo, se procede a la incorporación del diseño gráfico de la interfaz al diseño HCI que se haya realizado.

Conclusión

El diseño de la interfaz de usuario suele ser un aspecto clave para el éxito del proyecto. Además de ser la forma más inmediata de tangibilizar todo el desarrollo del software, es la forma en la que permanentemente interactuará el usuario destinatario del software con el mismo software, por lo que en muchos casos, el éxito o fracaso del producto depende en gran medida de la interfaz creada.

Por este motivo, en Kynetia pensamos que la única forma de poder garantizar el éxito en la creación de la misma, es abordándola de forma metódica, comenzando por el diseño de la Arquitectura de Información, para seguir con el Diseño de la Interactividad y concluyendo con el Diseño Gráfico de la misma. Y todo ello, desde el comienzo del proyecto, prototipando nada más que es posible e iterando para ir refinando los detalles a lo largo de la ejecución del proyecto.