viernes, 29 de junio de 2012

Menús de contextos de regiones y Menú de pie de página



La pantalla minimalista de Google ha evolucionado
en el tiemplo. Puede verse en ella las diferencias entre
el menú del encabezado del que conversamos
en días pasados y el menú del pie que conversamos hoy.

Continuando con la conversación de las últimas semanas sobre las prácticas de navegación exitosas en la Web, queremos comentar hoy acerca de dos tipos de menús de menor exposición, pero necesarios de conocer como recurso de comunicación y estrategias para una navegación efectiva: los menús de contexto de regiones y el menú de pie de página. En días pasados hemos estado explicado por qué la aproximación tradicional de usar un único menú ha sido sustituida en la Web moderna por un sistema de múltiples menús. Mencionamos y describimos el menú institucional (del encabezado), el menú de opciones principales de contexto (normalmente en la columna izquierda), el menú de opciones complementarias (columna derecha). Estos son de alguna manera los más visibles y relevantes, sin embargo, la discusión sobre menús y navegación no está completa si no se le incorpora los dos tipos que mencionamos en el título de este post.

Los menús de contexto de regiones aparecen en forma eventual en zonas específicas de la pantalla para habilitar opciones que deben manifestarse al usuario cuando se dan ciertas condiciones, como por ejemplo, posibilidades de edición o de interacción de la persona conectada a un determinado contenido.

Algunas veces estos menús sólo aparecen cuando se oprime el botón derecho del ratón. Sin embargo, este tipo de uso no está muy extendido por las limitaciones que implica de hardware y de sistema y por tanto de costumbre y adaptabilidad del usuario. El hecho de que el menú no sea visible sino sólo cuando se oprime el botón derecho del ratón para desplegar opciones ligadas al contexto de la región donde está posicionado el cursor puede verse como una ventaja o como una desventaja. Una de las razones por las que esta práctica no es completamente generalizada es porque no todos los ratones tienen un botón derecho ni todos los usuarios están acostumbrados a usarlo y es una complejidad adicional sugerirlo a los usuarios nóveles. Por esto muchas veces se prefiere hacer los menús explícitos. Sin embargo, si hay muchas regiones con menús de contexto habilitados puede  ser incómodo que sean todos visibles. No hay pues una solución universal, idónea en todos los contextos.

El menú del pie de página en cambio suele estar siempre presente y visible y si no es ampliamente usado por los lectores es porque para verlo se requiere llegar al final de la pantalla presentada y lo más típico, en términos estadísticos, es que el usuario elija su próxima opción de navegación antes de llegar al final de la página que se le presenta.

El menú de pie de página normalmente se usa en una de dos formas: La primera, para proporcionar un lugar adicional desde donde realizar las distintas opciones de navegación que facilite su invocación a aquellos usuarios que llegaron al final de la página. Se espera que estos, si llegaron allí tengan menos prisa que los que sólo navegan por el principio y es común que en este menú se coloquen opciones de menús anteriores en forma más desplegada que en el menú institucional y con menos contenido gráfico, o reorganizadas con otros criterios, como para que no luzca como una simple repetición.

Una segunda manera de usar el menú del pie de página tiene que ver con su propia naturaleza. Este es el menú para los lectores que están buscando algo mucho más infrecuente al punto que se toman el trabajo de ir hasta el final de la página. Este menú es, por tanto, un lugar donde se pueden colocar aquellas opciones estadísticamente mucho menos usadas pero que, sin embargo, deben estar porque son necesarias para que el sitio Web sea completo. Por ejemplo, información para el público muy técnico (por ejemplo desarrolladores).


viernes, 22 de junio de 2012

En la derecha, el menú de opciones complementarias


Los usuarios de Facebook pueden ver como la columna derecha sigue
las pautas de Arquitectura de Información señaladas aquí. Se presenta
un menú de opciones complementarias que una veces son enlaces a posibles
amigos del que consulta y otras veces puede ser publicidad, por ejemplo.
Las últimas semanas hemos estado conversando de cómo la navegación en los sistemas modernos se desarrolla a través de varios menús, hasta cinco en muchos casos. Esta nueva manera de interactuar entre un sistema de información y sus usuarios sustituye a la solución clásica de un único menú que se usó por muchos años como mecanismo básico de comunicación y que, actualmente, luce completamente inapropiada, rígida, inmanejable, tanto para usuarios como para desarrolladores de contenidos y gerentes de servicios. Siguiendo esta secuencia queremos referirnos a las buenas prácticas con uno de los cinco menús que hoy día suelen usarse, al que llamamos, Menú de opciones complementarias, y que aparece, en muchos casos, en la zona derecha de la página Web.

Las pantallas apaisajadas de los computadores que usamos en la actualidad facilitan colocar en la derecha un recurso adicional que antes se usaba poco. Una columna destinada a presentar opciones complementarias (ver Los cinco menús modernos y Las áreas básicas de la salida).

¿Qué se hace con esta columna? ¿Por qué se usa? ¿Cuáles son las buenas prácticas? Es de lo que hablaremos hoy.

Como hemos señalado, aunque es diferente en otras culturas, en la nuestra leemos de izquierda a derecha, por lo que no es práctico colocar en la derecha información que deba leerse en primer término. Por el contrario, colocamos allí contenidos y opciones que se esperan que el usuario los vea después de que está completamente contextualizado en el contenido de la página que les estamos presentando. Por ello, lo natural es colocar opciones de complemento, que se pueden considerar como alternativas adicionales. Se pueden colocar allí los caminos de navegación que son pertinentes pero de uso menos frecuente, las opciones que son específicas del tipo de contenido que se está presentando o, incluso, del contenido muy particular de la página que se muestra.

Por ejemplo, en este menú pueden presentarse otros tipos de navegaciones, no basadas en la estructura funcional que es característica en los otros menús. Una navegación temática o una navegación según la línea de tiempo puede ser una manera excelente de aprovechar las posibilidades del menú de opciones complementarias en la columna derecha.

Si se trata de una página de uso masivo, en un sitio Web que se financia totalmente con publicidad o, parcialmente, a través de ella, este menú de opciones complementarias puede incluir información publicitaria.

A título de ejemplo, si se trata de una página que presenta una receta de cocina, la columna derecha puede usarse para presentar esquemas de navegación temática sobre las recetas, o la biografía o curriculum del autor de la receta o enlaces motivados a recetas similares. Algo análogo podría plantearse de un sitio que presenta un documento político o un juego. La columna derecha podría usarse para otros esquemas de navegación, para recursos biográficos o relacionados con los autores, referencias de ese tipo de contenido (documentos, juegos) o enlaces vinculados con el texto principal presentado. Estas son opciones que muchos usuarios, después de leer el contenido principal de la página, querrán elegir, pero no son los enlaces funcionales principales (que deberían estar del lado izquierdo).

Finalmente hay que señalar que el menú de opciones complementarias no tiene que lucir como un menú convencional. No tiene por que ser una lista de opciones numeradas o una mera secuencia de enlaces. Pueden aprovecharse todas las capacidades de las tecnologías Web para presentar con adecuadas técnicas gráficas las posibilidades de navegación complementaria que se quieren ofrecer. Por ejemplo, puede el lector fijarse que en este blog no hay columna izquierda, lo que centra al lector en el contenido presentado. La columna derecha, consecuentemente con lo hablado, presenta la posibilidades de navegación complementaria: por temas arriba y por linea de tiempo abajo y, entre éstas, una muy pequeña presentación y otras opciones eventuales: una forma de registro para nuevos usuarios y un enlace a la presentación de un libro del autor del este post.

viernes, 15 de junio de 2012

¿Por qué varios menús?: El Menú de opciones principales del contexto


Menú de la columna izquierda
en un perfil de Facebook
Puede notarse el uso de  los
criterios de Arquitectura de
Información señalados en este post 
En nuestro post de la semana pasada vimos como en el diseño de sistemas Web modernos quedaron muy atrás las antiguas nociones de navegación de los sistemas dirigidos por un único menú. Actualmente los sistemas usan varios menús y aprovechan las ventajas de la navegación hipertexto y las posibilidades de diagramación, tipos de letras, fondos, imágenes y colores que caracterizan a las interfases gráficas de las tecnologías Web. Estas capacidades de la WWW generan una infinitud de maneras distintas de establecer la navegación de un sistema, pero en medio de todas esas posibilidades hay convergencias en las buenas prácticas. Una de ellas es la del menú de opciones principales del contexto que exponemos en el post de hoy.

Así como el menú institucional (sobre el que conversamos la semana pasada) está normalmente presente en el encabezado (Ver Las áreas básicas de la salida y Los cinco menús modernos), el menú de opciones principales del contexto aparece normalmente en la zona izquierda de la salida, porque, dada nuestra costumbre cultural de leer de izquierda a derecha, ésta es una zona privilegiada. Cuando tenemos el rol de lectores, dirigimos allí la vista, de un modo natural, al comenzar a mirar la pantalla para leer la página Web que nos presenta.

¿Por qué incluir este menú en la columna izquierda si ya existe un menú en el encabezado de la página? y ¿Qué cosas colocar en este menú de opciones principales? Son preguntas pertinentes.

Las pantallas gráficas de los computadores actuales son anchas y por ello muestran más información que la que cabe a lo ancho de una hoja de papel estándar. Eso significa que hay una oportunidad de añadir columnas, particularmente la de la izquierda, sin restar información de la salida, ni quitarle a la zona central su rol esencial. Por otro lado, como mostramos en nuestro último post, el menú horizontal del comienzo de la página es normalmente un menú que se reserva para la información general de la institución, por lo que no está contextualizado en el usuario conectado y lo que él está haciendo. De allí que resulte práctico que en el sitio por donde el usuario comienza a leer se encuentre un menú que tiene directamente que ver con quien él es y lo que él está haciendo o puede hacer. Este es el criterio para diseñar este menú y de allí su nombre.

Al diseñar el menú de la columna izquierda tenemos que pensar en qué opciones queremos presentarle en primera instancia al usuario. Normalmente desde allí debe haber acceso, en una organización lógica y consistente, a mucho de lo que el usuario puede hacer. Por otro lado el menú no tiene que tener la forma de un menú tradicional. Se trata de presentar un conjunto de opciones frecuentes en el contexto, en forma ordenada, jerarquizada y atractiva y para ello se pueden usar todos los recursos gráficos de las salidas Web que se consideren necesarios.

Uno de los cuidados que si hay que tener es el de no saturar el canal, de no excederse en la cantidad de submenús y de opciones. Manejar submenús después de un tercer nivel no suele ser muy práctico. Tampoco colocar más de diez o doce opciones en un mismo submenú, de modo que cada vez que esto nos ocurra debemos pensar si no hay otra manera de reorganizar el acceso a la funcionalidad. Obviamente no siempre se puede y no siempre es fácil encontrar una forma idónea de presentar las opciones de navegación.

Finalmente, hay que saber que los usuarios tienen personalidades diferentes, trayectorias y conocimientos diferentes, por lo que en la práctica resulta imposible crear un modelo de navegación que sea fácil para todos. Pero las pautas generales de buenas prácticas que expresamos en este post ayudan y debemos usarlas para guiar el trabajo de diseño del menú de opciones principales del contexto en la columna izquierda de la pantalla.

viernes, 8 de junio de 2012

Los cinco menús modernos


El menú institucional de Google se ha trabajado para ser simple

Abordamos hace unas semanas el tema de la Navegación y vimos que no ésta no es fácil resolver en forma satisfactoria, dada la enorme hipertextualidad de los contenidos y la experiencia variada de los usuarios que caracteriza a los sitios Web modernos. Hemos comentado que antes, la invocación a las funcionalidades de un sistema de información se hacía típicamente a través de un menú con múltiples opciones de submenús, pero que hoy día este mecanismo de navegación luce muy primitivo, incómodo y poco ajustado a las expectativas y necesidades del usuario. En efecto, ya no se usan los menús tradicionales ni se desarrollan sistemas basados en una navegación a través de un simple menú de opciones. Pero, como señalamos en su oportunidad, esto no significa que los menús están muertos. Por el contrario, los buenos sitios usan muchas veces un esquema de navegación que emplea hasta cinco tipos de menús: Menú institucional, Menú de Opciones principales del contexto, Menú de contexto de regiones, Menú de opciones complementarias y Menú del pie. Estos son muy diferentes en apariencia, ubicación en la pantalla y funcionalidad. Por razones de espacio revisaremos hoy sólo el primero y dejaremos los otros para posteriores post.

El conocimiento y uso de los menús que típicamente se usan hoy día está vinculado con el tema de las áreas básicas de la salida del que hablamos la semana pasada. De modo que recomendamos a nuestros lectores repasar ese post (Ver).

El menú institucional
El menú institucional cumple un rol muy importante. Suele ser un menú de tipo horizontal que se despliega normalmente en el encabezado del sitio Web y presenta las opciones que son fundamentales para la  institución. Un par de opciones son típicas aquí: Acerca de nosotros o contacto e Inicio. El enlace de inicio permite al usuario recomenzar la navegación desde el principio y suele ser un problema cuando un joven diseñador desprevenido omite la opción. Más temprano que tarde se nota su ausencia. El enlace “Quiénes somos”, “Acerca de …:” o “Contacto” normalmente da acceso a la información estable en el sitio Web: Visión, Misión, Valores, Historia, Coordenadas de contacto, etc. En algunos casos este enlace de información institucional permanente se deja para el Menú del pie de tal manera que el Menú institucional se reserva para los enlaces más dinámicos vinculados con la organización.

A partir de este punto comienza el trabajo de fuerte de diseño de la navegación: ¿Qué otras cosas deben ir en el Menú institucional? Es típico incluir los enlaces a las actividades fundamentales de la organización. Pero esto debe ser revisado y seleccionado para escoger las palabras y hacer una clasificación que resulte adecuada. El menú no debe ser extenso, sino más bien simple. Lo más simple posible. Un menú muy extenso invita poco, distrae mucho y diluye la jerarquía que deben tener los contenidos fundamentales. Algunas opciones del Menú institucional conducirán de una forma natural a una página que multiplica las opciones de navegación en forma más hipertextual, explicativa y estética que lo que lo haría un menú de pretendida exhaustividad.

El hecho de que el Menú institucional esté siempre presente sugiere que las opciones frecuentemente usadas en el servicio de información deben estar allí, disponibles para ser usadas, fácil y rápidamente.

A título de ejemplo, veamos el menú institucional de Google:
(Google Plus), Búsqueda, Imágenes, Mapa, Google Play, You Tube, Noticias, Gmail, Doc, Calendar, Más.

Son las opciones principales. Por supuesto, Google tiene muchísimas más opciones. Muchísimas más aplicaciones y servicios. Pero lo consistente y amigable es, como vimos, reducir las opciones institucionales, enfatizar y facilitar lo más usado y/o lo que más nos interesa promover. En Google, por ejemplo, la opción “Buscar en libros” se deja para un submenú y su interesante “Buscador académico”, mas restringido en su público. se baja para una página que se abre en un tercer nivel de profundidad. La idea es la misma. El menú institucional debe ser simple, lo más simple posible.

viernes, 1 de junio de 2012

Las áreas básicas de la salida


Aréas básicas en una salida arquetípica de la Web.
Cada zona tiene un uso frecuente.
No todas las zonas están presentes siempre.
Al abordar el tema de la Navegación, como mencionamos la semana pasada, es conveniente saber que hay patrones regulares y áreas típicas en las salidas de los sistemas disponibles en la Web. Estas áreas pueden reconocerse en cualquier sitio exitoso de la Internet: Desde Amazon hasta Google, pasando por Twitter, Facebook y los servicios de correos. Estas zonas comunes representan un conocimiento adquirido y no una restricción excesiva ya que siempre hay lugares para la experimentación y para el ejercicio creativo. El punto importante para el que diseña un servicio es que, para hacerlo bien, es conveniente saber cuáles son las prácticas estándares y las variantes interesantes que hay sobre ellas. Entender cómo se usan estas áreas básicas de la salida es clave para el diseño de buenas experiencias de navegación.

Las áreas básicas de una salida arquetípica de un sitio Web pueden apreciarse en la figura: Encabezado, Pie, Columna izquierda, Columna derecha, Columna o columnas centrales, Encabezado y pie de la columna central.

Es un poco arbitrario si decidimos que estas áreas estén o no presentes y cómo las usamos en términos de la navegación. Sin embargo, más allá de cualquier otra consideración, suele haber prácticas de navegación estandarizadas por el uso que se les da en forma frecuente.

El encabezado
Se usa con frecuencia para presentar el sitio web institucionalmente. Normalmente se mantiene al navegar entre las distintas páginas, lo que da un contexto organizacional. Es normal que haya en esta zona una representación de la imagen general de la institución detrás del sitio Web y un menú institucional. En ocasiones se coloca aquí una caja de búsqueda y facilidades para la conexión o inicio de sesión. Es una zona de alta visibilidad en nuestra cultura lectora arriba a abajo.

La columna izquierda
Se usa para la navegación contextual de primera mano. Se despliega normalmente en esta área el menú de opciones primarias que se le quiere presentar al usuario en un contexto dado. Es una zona privilegiada porque estamos acostumbrados a leer de izquierda a derecha. Si colocamos, por ejemplo, una caja de busqueda aquí estamos definiendo implícitamente que ésta es una operación frecuente para el usuario. En blogs como éste el hecho de que no haya columna izquierda hace que leer el contenido de la columna central  se establezca en forma tácita como la actividad de contexto esperada.

La columna central
La columna central (o columnas centrales) se usa para desplegar el contenido principal que se le quiere presentar al usuario. Eventualmente se permite una navegación contextual que típicamente se activa con el botón derecho del ratón. Puede tener un encabezado y un pie que ubican al usuario acerca del contenido específicamente mostrado en la página (ver abajo).

La columna derecha
Este espacio se emplea típicamente para información adicional complementaria y la navegación ocasional complementaria. Los sitios que se financian a través de publicidad suelen usar esta región de la pantalla para colocar publicidad en forma discreta, no invasiva, porque no interrumpe los contenidos centrales expuestos. Cuando se requiere una explicación adicional sobre el contenido de la columna central, este puede ser un lugar apropiado.

El pie
El pie de la página suele usarse para una síntesis sencilla de la navegación institucional. Es típico que sea más textual y menos gráfica, pero esto no es estrictamente necesario que sea así. Muchas de las opciones institucionales del encabezado general se repiten aquí, aunque es típico en lo hagan en forma más simple y textual, para facilitar la navegación sin comprometer la estética general.

Encabezado de la columna central
Identifica y contextualiza la página que se está viendo a diferencia del encabezado principal que presenta la institución más que la página. En ocasiones los sitios que se financian a través de publicidad colocan contenidos aquí, pero cuando se hace eso hay que estar consciente que se está colocando la publicidad en un punto relevante de la salida, lo cual puede ser un poco invasivo si la publicidad es gráfica o grande y no textual y pequeña.

Pie de la columna central
Normalmente se incluyen en esta zona enlaces de navegación hacia delante o hacia atrás vinculados con el contenido de la página que se presenta. Muchas veces estos enlaces se repiten en el encabezado y el pie de la columna central para facilitar la navegación del usuario con independencia de punto en que éste está en su lectura de la página.

Estas siete secciones son típicas, pero no obligatorias, por lo que no siempre están presentes en la salida. Dejamos al lector el ejercicio de reconocer su presencia, ausencia y uso en estandarizado o particular en los distintos servicios clásicos de la Internet.