Agregar Acceso Directo a la Homepage

Motivación

El refactoring descripto en el capitulo 5.2.1 “Crear Acceso Directo” aplicado sobre el diagrama de navegación sugirió cambios en la navegación de la página a fin de mejorar el acceso a un proceso de negocio. El refactoring descripto en este capítulo demuestra el impacto de la creación del acceso directo en el modelo de presentación de la página web y como este modelo se altera.

Krug [10] y Nielsen [11] hacen una importante observación respecto de cómo los usuarios interactúan en los web sites. Ellos afirman que estos no leen las páginas web sino las escanean buscando la información que más se asimila con lo que tienen en mente y con lo que están buscando en ella. Sostienen que mayoritariamente los interesados buscan completar el objetivo que los llevó a esa aplicación, por eso no les interesa leer o perder mucho tiempo en la página en pos de la información, por el contrario, cuanto más rápido puedan localizar lo que buscan, mejor y más satisfechos van a estar.

Para evitar que el usuario tenga que vagar por la página en búsqueda de la información deseada, es siempre deseable que los procesos más utilizados estén visualmente accesibles. En una página web, un acceso directo es un atajo a una funcionalidad bastante utilizada por los usuarios con el objetivo de facilitar su acceso. La creación del acceso directo hace que sea más rápido y más simple al usuario llegar a la funcionalidad que desea, reduciendo el número de pasos necesarios para eso, como se demostró en el refactoring “Crear Acceso Directo” aplicado sobre el diagrama de navegación. Desde el punto de vista de la presentación de la página, el acceso directo hace que dichas funcionalidades queden más visibles y destacadas en la Homepage, más accesibles al usuario.

El bad smell que se aborda es la dificultad de encontrar y acceder a funcionalidades básicas en la aplicación.

Mecanismo

Para aplicar el refactoring en el diagrama de presentación, se debe: 1. Identificar el <processClass> que necesita un acceso directo.

2. Agregar en la Homepage los widgets necesarios para acceder al <processClass> identificado en el paso 1 (uno).

Ejemplo

El ejemplo se basa en la página de un banco donde la funcionalidad de acceso a la cuenta no sigue el patrón de la mayoría de las páginas de Home Banking: tener un acceso directo rápido para que el usuario pueda ingresar su Usuario y Clave y acceder a sus cuentas rápidamente. En la mayoría de los bancos esa funcionalidad se encuentra en el costado superior de la página, resultando visible y fácilmente identificable dados sus campos de: Usuario y Clave.

Los patrones son buenos indicadores de que lo que se implementó tuvo una cierta aceptación. En el caso de las aplicaciones web es positivo hacer uso de los patrones existentes puesto que los usuarios ya están familiarizados con ellos y suponen mayor facilidad de uso [10]. Uno de los patrones utilizados en las páginas

108

de Home Banking consiste en presentar al cliente, de manera visible, los campos de Usuario y Clave para el ingreso a las cuentas. Un acceso distinto a este patrón acarrea al usuario un grado de dificultad adicional y a prima face innecesario, como lo es encontrar el nuevo mecanismo de Login a las cuentas.

En la página del Banco Nación Argentina, en vez de tener el acceso directo, la página muestra una imagen que también es un link a otra página. Un problema es que, por tratarse de una imagen y no de un texto sub- rayado como convencionalmente se usa, resulta difícil para el usuario asociar la imagen a un link, visto que está habituado al otro modelo. Otra contrariedad es que la mayoría de los usuarios buscan en la página principal de un banco, automáticamente, por los campos de Usuario y Clave y no por una imagen. El hecho de no tener esos elementos demanda tiempo adicional para que el usuario busque en la página por links que puedan llevarle a realizar esta tarea. Ese tiempo adicional es vivido como pérdida de tiempo.

La Figura 45 muestra la vista parcial del diagrama de presentación que describe como es el acceso a la funcionalidad Login de Cuentas en la secuencia de páginas del banco estudiado. La Homepage posee una imagen con un link que lleva a una segunda página llamada Home Banking, esta a su vez posee también una imagen con un link a una tercer página llamada Login Usuario; recién en esta se encuentran los campos "Usuario" y "Clave" y el botón "Ingresar" que permite que el usuario finalmente entre mediante sus datos y acceda a las informaciones de su cuenta.

109

Figura 45: Vista parcial del diagrama de presentación antes del refactoring

La Figura 46 exhibe como el refactoring “Agregar Acceso Directo a la Homepage” reemplaza en la Homepage la imagen/link que llevaba a página de Home Banking por los campos de "Usuario" y "Clave" y el botón “Ingresar”, los que antes se encontraban en la página de Login de Usuario. Dado que el diagrama de presentación en UWE no define aspectos concretos de la página, como es la posición, ésta no será definida.

110

Figura 46: Vista parcial del diagrama de presentación después del refactoring "Agregar Acceso Directo a la Homepage".

Creando este atajo el usuario sabe, al instante que entra en la página, donde debe ir para acceder a sus cuentas y lo hará sin perder tiempo rastreando en la página por links o botones que lo lleve a esta funcionalidad. Otra ventaja es que el usuario se ve re-direccionado a otra página, con lo cual se acortan los pasos necesarios para la concretización de su objetivo, como se describió en el Refactoring “Crear Acceso Directo” sobre el diagrama de navegación.

Mejoras Intencionadas

- Optimizar la presentación del <processClass> en la Homepage; - Reducción del tiempo necesario para disparar el <processClass>;

- Aumento de la satisfacción del usuario que puede acceder a un proceso usado frecuentemente más fácilmente;

- Mejorar la presentación de la aplicación web que se aliña con los patrones utilizados por las páginas de Home Banking;

Refactorings Relacionados

Como se dijo previamente, este refactoring está relacionado con el refactoring “Crear acceso directo” descripto en la capítulo 5.2.1 sobre el diagrama de Navegación ya que se trata del impacto en el diagrama de presentación debido a los cambios realizados anteriormente en el proceso.

111