Patrones de Diseño Web

Llevo mucho tiempo desarrollando aplicaciones web, durante todo este tiempo he aprendido mucho sobre usabilidad, interfaces y diseño. Cada proyecto de desarrollo es todo un reto y cada cliente tiene diferentes necesidades y diferente enfoque a como desea ver su aplicación. Lo que no saben y que es parte de la educación y comunicación que debe de mantenerse entre clientes y desarrolladores es que hay subvenciones y patrones que se deben de seguir para lograr una mejor interacción entre la aplicación y los usuarios, esto es lo que se le conoce como patrones de diseño.

Un patrón de diseño o interfaz (creo que así se entiende mejor), es la conexión física y hasta emocional entre dos aparatos, entidades o sistemas (Traduzcamos esto como la capacidad que tiene el usuario de comunicarse con una aplicación).

El desarrollo de interfaces para aplicaciones web esta basado en una serie de reglas que ya han sido definidas, todas o una mayoría adoptadas por la experiencia de muchos desarrolladores, diseñadores y psicológos que han analizado la manera en que las aplicaciones son utilizadas por los usuarios.

Pues resulta que para lograr una buena interfaz se necesita siempre el trabajo coordinado entre diseñadores y programadores (la discusión que nunca termina) y aunque cada uno tiene una percepción mental diferente de lo que puede ser una interfaz, una buena comunicación pueden ayudar a mejorar enormemente una aplicación consiguiendo interfaces atractivas, por eso es bueno que ambas personas aunque trabajan en diferentes partes del desarrollo de una aplicación web tengan similitud de conocimientos en cuanto a lo que es estandar y se necesita tener como base en una aplicación.

No hay que olvidar que los usuarios también han adquirido cierto grado de experiencia en cuanto a la navegación por la web y fácilmente reconocen elementos ubicados en lugares ya definidos por estos patrones, por eso es la importancia de seguir estos estándares de diseño, algunos ejemplos por citar algunos son los siguientes:

Localización de Perfil y Salida de la aplicación

Definido en la parte superior derecha de la página, es un pequeño cuadro desde el cual podemos tener acceso a nuestro perfil mediante un enlace, ahí mismo se encuentra un enlace que nos lleva a abandonar la aplicación de manera segura. Los estilos y la información contenida en este contenedor varian, pero es normal encontrarse al menos un enlace para ver/modificar el perfil del usuario y otro para salir de la aplicación.

Resultados de búsqueda

Los resultados de búsqueda por comodidad y facilidad a encontrar la información de manera rápida, se implementan mediante un cuadro de texto desde el cual se realiza la búsqueda, una vez que la búsqueda se ha realizado, el resultado aparece en forma de cascada donde se muestra información relacionada a la búsqueda. De manera predeterminada sabemos que cada resultado mostrado al hacer click nos debe de mostrar mucho más detalle.

Filtros de búsqueda

Al igual que los resultados de búsqueda, los filtros de búsqueda es una agrupación de términos de búsqueda generados a partir de la información más relevante, estos filtros sirven para indexar y obtener una muestra de resultados más específica, muy útiles para agilizar consultas de datos. De igual manera los resultados son mostrados en forma de cascada donde se muestra la información relacionada a la búsqueda.

Vistas Maestro – detalle

Las vistas maestro-detalle comunmente utilizada en diferentes tipos de aplicaciones no solamente web’s, definen la vista preliminar de un conjunto de datos, los grids o rejillas de resultados utilizan mucho este tipo de vistas para mostrar información relacionada a la fila que se ha seleccionado.

Generalmente la simplicidad será la mejor manera de representar una buena interfaz, muchas veces los usuarios no tienen el suficiente tiempo para darse a la búsqueda de un enlace o información específica, por lo que es muy recomendable enfocarse en no hacer perder el tiempo a los usuarios desarrollando interfaces limpia y sencillas. El diseño web y el contenido de este forman una estructura visual que debe de ser atractiva a la vista y gusto de un usuario.

Existe una ley muy clara, básica y aplicable al diseño de las interfaces (Ley de Fitt) que dice que mientras más grande y próximo al puntero del ratón este un objeto, mucho más sencillo será hacer click sobre él.

Adicionalmente al tema de las interfaces es bueno aplicar todos aquellos consejos que nos hacen mejorar nuestras aplicaciones para ofrecer una mejor experiencia de navegación a los usuarios.

Algunos consejos extras escenciales para mejorar la usabilidad

20 consejos de usabilidad esenciales para proyectos web c62550l

Consejos para mejorar la usabilidad de un blog

Usabilidad para principiantes

Fuentes:

http://designinginterfaces.com/
http://www.rosenfeldmedia.com/books/webforms/

Compartir y Disfrutar

Entradas Relacionadas:

1. Implementando un ToDo con jQuery para tu aplicacion Web
2. Desarrollo de aplicaciones para ambientes tridimensionales
3. Sesion caducada, una regla de la usabilidad

Uno de los puntos mas importantes en el desarrollo de aplicaciones web y que generalmente se olvidan son las sesiones caducadas y es que en las aplicaciones puede llegar a ocurrir que se esta a punto de ejecutar una tarea importante o de enviar informacion sensible, pero por que nos hemos tomado mucho tiempo en el sitio quizas capturando la informacion, la sesion ha caducado y esa preciada informacion capturada se ve perdida.. Eso seguro les ha pasado mas de una vez..

Pero entonces como controlar si la sesion ha finalizado antes de enviar la informacion.. Uff, la respuesta esta mas que sencilla, ya que con un poco de ingenio, algunas lineas de codigo javascript antes de enviar la informacion de un formulario y ajax, un simple request bastara para saber si o no una sesion todavia existe..

La usabilidad radica en que no hay que permitir que a los usuarios de nuestras aplicaciones les ocurra esto, ya que es algo que mediante QA se debe detectar y prevenir. La regla no es basica, pero si muy importante, con certeza diria que los usuarios se sentiran reespaldados tras ver que se les ha avisado que su sesion ha caducado y que pueden volver a entrar a la aplucacion y que sus datos capturados no se les ha perdido..

Compartir y Disfrutar

Entradas Relacionadas:

1. Implementando un ToDo con jQuery para tu aplicacion Web
2. Patrones de diseño para interfaces web
3. Como mejorar la accesibilidad de tu sitio web