Contexto
La industria del software, como cualquier otra industria, ha sido afectada por la evolución del Internet. Ahora las empresas que desarrollan software se ven obligadas a generar una versión de sus aplicaciones montadas en arquitecturas del modelo-vista-controlador.
Los usuarios se han convertido en clientes cada vez más exigentes que solicitan aprovechar las ventajas de ubicuidad que ofrece el Internet y acceder a las aplicaciones a través de un navegador sin la necesidad de instalar la aplicación en cada dispositivo que utilicen, que se traduce en un mayor aprovechamiento del tiempo y en mejorar su productividad.
Eso impone la necesidad de crear desarrollos que puedan soportar una amplia variedad de dispositivos electrónicos móviles y navegadores, incluir aspectos gráficos que transformen el software en aplicaciones atractivas para la vista, y aprovechar mecanismos multimedia. Todo ello hace que los proyectos de software tengan que cubrir cada vez más requerimientos en menos tiempo.
Explicación
15.1 Diseño de la interfaz y el contenido
Uno de los aspectos fundamentales de una aplicación web es su diseño estético o diseño gráfico, responsable de los aspectos estéticos o visualmente agradables para el usuario. Por lo general este trabajo es asignado a un ingeniero de diseño gráfico de manera exclusiva, sin embargo, no hay que perder de vista los siguientes aspectos de la interfaz que propone Pressman (2010).
Aspectos de la distribución:
Mantener el adecuado equilibrio entre la estética funcional, características de navegación y el contenido de una webapp es todo un reto sobre todo cuando existen limitaciones de espacio.
Aspectos del diseño gráfico
Habiendo sorteado la distribución de los elementos que conforman la interfaz de usuario, el siguiente paso será incorporar los elementos visuales como colores, tipografías, fondos, animaciones, estilos de botones, menús, etc. Ten en cuenta que existen muchos diseños gráficos que han sido patentados y que no pueden ser reutilizados por otras compañías.
Por ejemplo, la compañía Apple patentó el diseño y animación de imágenes en Cover Flow con el lanzamiento de iphone, de tal suerte que no sería posible aplicar este mismo diseño a otra aplicación sin el consentimiento expreso de la compañía.
Patente USD624932 S1. (2010). Animated graphical user interface for a display screen or portion thereof.
Recuperado de https://www.google.com/patents/USD624932
Sólo para fines educativos.
De igual forma, el uso de imágenes (gráficos de vectores o fotografías) debe respetar el derecho de autor, por lo que son siempre convenientes los servicios de un ingeniero en diseño gráfico.
Diseño del contenido
Según Pressman (2010), citando el documento de Alan Dix de 1999, el diseño de la interfaz de una WebApp debe responder a tres preguntas que aún son vigentes:
¿Dónde estoy?
En qué lugar se encuentra el usuario. Desde dar indicaciones visibles sobre el sitio web donde se encuentra, hasta el lugar específico dentro de ese sitio. Para ello será importante incluir un encabezado con información del sitio, tratando de mantener el estándar al ubicar el logo del sitio en la esquina superior izquierda, una función de búsqueda en el sitio en la esquina superior derecha, y un pie de página con hipervínculos como datos de contacto para soporte técnico, documentación del sistema, mapa del sitio y nivel de confidencialidad.
¿Qué puedo hacer ahora?
Es necesario que el usuario pueda entender la interfaz, identificando qué funciones se encuentran activas o inactivas, mecanismos de navegación y el contenido más importante debe aparecer al inicio de la pantalla. Para ello es necesario hacer uso de la tipografía (sin sobrepasar a 5 tipos diferentes), con un tamaño grande mostrar el contenido más importante.
¿Dónde he estado y hacia dónde voy?
Por estándar los navegadores cambian el color de los hipervínculos que han sido visitados, permitiendo al usuario reconocer dónde ha estado. Los menús jerárquicos pueden ayudarle a reconocer a dónde puede ir.
Con estas tres preguntas resueltas, el diseño de la interfaz de una webapp será de utilidad al usuario, facilitándole encontrar sus funciones y su ubicación en todo momento.
15.2 Atributos de calidad
El diseñador de aplicaciones web debe considerar las características de cualquier otro diseño, como la usabilidad, consistencia, funcionalidad, eficiencia y facilidad para recibir mantenimiento, y particularmente la seguridad, disponibilidad, escalabilidad y time-to-market, como parte los atributos que evaluarán la calidad del software.
Árbol de requerimientos de calidad.
Pressman, R. (2010). Ingeniería de Software. Un enfoque práctico (7ª ed.). México: McGraw Hill.
Sólo para fines educativos.
Seguridad: la misma ventaja de ubicuidad que ofrece utilizar un medio público, como el internet, trae consigo retos en cuanto a la seguridad informática. No importa el tamaño de la compañía, grande o pequeña, cualquiera está expuesta a ser blanco de un ataque cibernético originado en cualquier latitud del planeta, por lo que es necesario realizar un análisis de vulnerabilidades de caja blanca o caja negra, y tratar de probar la robustez del sistema desde diferentes ángulos. Aplazar estas pruebas podría provocar daños irreversibles a uno de los bienes más valiosos de las organizaciones: la información.
Disponibilidad: es la capacidad que tienen los sistemas de mantenerse operando de manera continua. Dado que una webapp puede ser accedida desde cualquier lugar, los usuarios también esperan que les permita utilizarla en cualquier momento del día o la noche. Esto impone condiciones al diseño de respaldo para garantizar la continua operación, además de tener que considerar mecanismos de monitoreo y soporte técnico 7x24.
Escalabilidad: se refiere a la habilidad de la webapp para incrementar su capacidad conforme crezcan las necesidades del cliente, ya sea en aceptar más usuarios o en registrar mayor número de transacciones. La escalabilidad requiere de la flexibilidad de incrementar su capacidad cuando se llegue a un punto límite, y la mejor forma de hacerlo es contar con servicios basados en la nube, habilitados para incrementar sus servicios de forma inmediata; esto libera a las organizaciones de la necesidad de tener que conseguir, instalar y configurar hardware.
Servicios de Amazon Web Services®.
Imagen obtenida de https://aws.amazon.com/es/
Sólo para fines educativos.
Time to market o tiempo para llegar al mercado es una ventana de tiempo en la que se pone a disposición del usuario una webapp, sobre todo aquellas que son ofrecidas al público. Esta característica debe ser vigilada con mucho cuidado por el grupo de soporte, ya que si la aplicación es bien recibida por el mercado, podría poner a prueba sus capacidades en los primeros minutos de lanzamiento. Una aplicación que no responda adecuadamente provocaría malas reseñas y pérdida de clientes.
En opinión de Pressman (2010), el diseño las aplicaciones web deben tener presente alcanzar las siguientes metas:
Haz clic en cada concepto para conocer más detalle.
Es una cualidad que parece sencilla de lograr, sin embargo, se requiere de un verdadero análisis de lo que el usuario necesita en cada momento de la aplicación. El problema comienza cuando se decide agregar todas las posibles funciones “por si acaso” el usuario desea utilizarlas, y al final sólo utiliza el 10% de ellas.
La simplicidad se logra a través de probar varias veces la interfaz con el usuario. Con cada iteración se detectan las funciones necesarias y se reubican el resto en apartados diferentes. Imagina que, al utilizar una aplicación, encuentras todas las funciones de configuración en la misma pantalla principal, el resultado sería una aplicación con demasiadas funciones que no siempre se requieren, saturando la pantalla y abrumando al usuario.
¿Ubicas los horarios de atención en esta página web?
Imagen obtenida de http://www.lingscars.com
Sólo para fines educativos.
Para obtener una aplicación web consistente es necesario que el diseño sea congruente y coherente. Congruente con el formato y la tipografía del texto. Coherente con el uso del estilo, color y aspecto.
La consistencia se logra mediante el uso de plantillas que permitan mantener el estilo del diseño, que son bastante útiles cuando existe un grupo de diseñadores responsables de componentes diferentes de la aplicación.
Los desarrollos de las aplicaciones web deben expresar una identidad relacionada con las funciones que ofrece. La identidad le dará personalidad a la aplicación. Una webapp destinada a generar reportes financieros de una empresa tiene una identidad diferente a una enfocada en el entretenimiento.
Al grado con que la webapp puede controlar los diferentes eventos que un usuario genera, al interactuar con la aplicación, se le llama robustez. Una aplicación debe manejar excepciones de entradas de datos, reintentos de la misma acción o recuperación de errores ajenos al usuario.
La forma en la que el usuario navega a través de las funciones de la aplicación web debe ser intuitiva y predecible. El usuario no requiere mayor explicación porque puede entender por sí solo como acceder a ciertas opciones y regresar al inicio.
Por ejemplo: Un texto que aparezca dentro de un recuadro y que cambie de color al pasar el puntero del mouse, sin duda le indicará al usuario que es un botón que ejecuta una acción específica. Un listado en que aparezca un signo [+] le indicará al usuario que ese texto contiene otras opciones de navegación.
Entre las opciones que tiene el diseñador para facilitar la navegabilidad de una webapp están las siguientes: pestañas, menús horizontales y verticales, menús en acordeón, ruta de navegación (breadcrumbs), pie de página, liga de homepage, imágenes en carrusel y paginación.
Las webapp tienen la ventaja de ser muy flexibles para incorporar atributos visuales que sean atractivos y dinámicos. El reto del diseñador será incorporar estos elementos sin impactar en el desempeño de las funciones y evitando saturar la interfaz de elementos con movimiento. Normalmente los usuarios se sorprenden la primera vez que observan elementos en movimiento, pero conforme pasa el tiempo se vuelve tedioso y una pérdida de tiempo esperar que termine una animación para continuar con una tarea.
Con una amplia gama de navegadores de Internet y dispositivos electrónicos portátiles, asegurar la compatibilidad es otro aspecto que el diseñador debe cuidar.
Es común que el desarrollo se base en una marca de navegador o para una resolución de pantalla, olvidando que el usuario tiene la facilidad de acceder a la webapp a través de diferentes medios. La compatibilidad se logra haciendo exhaustivas pruebas, y si el costo beneficio de generar una versión diferente no es favorable, es preferible documentar los requisitos técnicos recomendados al usuario.
15.3 Diseño arquitectónico
El modelo arquitectónico más adecuado para el diseño de una WebApp es la arquitectura Modelo-Vista-Controlador, ya que administra de manera independiente la interfaz del usuario, las funciones y el contenido.
Según Pressman (2010), la arquitectura de tres capas de esta arquitectura divide sus características en tres partes:
El Controlador coordina el flujo de información entre el Modelo y la Vista. Se encarga de recibir cada solicitud del usuario, selecciona la vista correspondiente y envía la solicitud de comportamiento al Modelo.
El Modelo se encarga de la lógica del procesamiento, las funciones y el contenido de la webapp. Cuando el controlador le solicita un cambio de estado, como una actualización de información, el modelo se comunica con la base y envía los datos a la Vista.
La Vista contiene las funciones de la interfaz de usuario y controla la forma en la que presenta el contenido de la webapp. La vista prepara los datos y los presenta al usuario en un formato adecuado, que en el caso de las aplicaciones Web podría ser formato HTML.
La arquitectura MVC de una webapp.
Pressman, R. (2010). Ingeniería de Software. Un enfoque práctico (7ª ed.). México: McGraw Hill. Fig. 13.8, Pág. 329.
Sólo para fines educativos.
Arquitectura del contenido
En opinión de Pressman (2010), el diseñador debe elegir entre cuatro posibles opciones para construir una arquitectura del contenido de una webapp.
Se trata presentar un contenido en una secuencia estricta. Por ejemplo, cuando se desarrolla una aplicación donde el cliente debe realizar un pago, por lo general es un proceso de tres pasos:
La secuencia de estos pasos no debe cambiar porque es parte del proceso de compra.
Se utiliza para mostrar el contenido en forma categórica en dos dimensiones.
Por ejemplo, una aplicación de venta de libros puede mostrar los libros de un cierto género de forma horizontal y de manera vertical los libros del mismo autor.
El control del acceso al contenido se inicia desde un solo componente, sin embargo, es posible navegar de forma vertical entre categorías y de forma horizontal entre las ramas del mismo nivel.
Es importante tener cuidado de que el usuario no se pierda al pasar de una rama a otra.
Esta estructura permite que la navegación sea flexible, sin embargo, es importante aclarar que mantener el control y procedencia de información que pasa de un componente a otro suele ser complicado.
Imágenes obtenidas del libro de Pressman, R. (2010). Ingeniería de Software. Un enfoque práctico (7ª ed.). México: McGraw Hill.
Sólo para fines educativos.
Cierre
Los retos del diseño de software de aplicaciones web son grandes, ya que no sólo hay que considerar elementos de funcionalidad y desempeño, sino también aspectos visuales de multiplataforma, simplicidad y consistencia que hagan que el uso de la aplicación sea una experiencia de usuario agradable. Todas estas variables deben permanecer controladas y balanceadas.
El panorama sería desalentador para el profesional del software, a no ser que el mismo equipo técnico de desarrollo pueda beneficiarse de los servicios de empresas que por una renta mensual pueden aumentar la capacidad de procesamiento, almacenamiento, licencias de software y soporte técnico.
Los servicios en la nube permiten reconfigurar toda la infraestructura en cuestión de minutos, algo de lo que no tendrán que preocuparse en la implementación del proyecto.
La tendencia en la industria del software se mantendrá por la práctica y aprovechamiento de las ventajas del Internet. Cualquier desarrollo de software debe contemplar una interfaz gráfica a través de navegadores, los clientes no esperarían menos.
Checkpoint
Asegurar el poder:
Referencias
Glosario
Pruebas de caja blanca: son pruebas a la seguridad donde se conocen los mecanismos internos utilizados para impedir el acceso no autorizado que pudiera provocar el robo o modificación de la información.
Pruebas de caja negra: son pruebas en las que se desconocen por completo los mecanismos de seguridad. Estas pruebas suelen ser llevadas a cabo por hackers de sombrero blanco que son contratados por las organizaciones para explotar cualquier vulnerabilidad. El resultado será un reporte que enliste las deficiencias encontradas.