Ubicación del menú y otras cosas: ¿a la derecha, a la izquierda o arriba? (Usabilidad)

3 08 2009
Menu ¿En donde va? derecha, izquierda. Usabilidad

Nos meteremos un poco con el cuento de la Usabilidad. No voy a entrar en detalles por que en Google existe mucha información sobre lo que trata la usabilidad, pero si sobre un tema que es básico.

El menú: ¿A la derecha o a la izquierda?. y es una pregunta complicada, mas cuando en la actualidad ya los “Portales Web”  (Palabra que ya nadie usa) deben ser mucho mas fáciles de manejar para los usuarios tanto noveles (Nuevos) como para los mas experimentados.

Entonces cosas como la ubicación del menú son tan esenciales como la pagina. ¿Por que?, la respuesta es simple:

Si tu en un libro no encuentras algo, ¿Donde buscas el tema que necesitas?. En el indice… ¿Cierto?. Ahora imagina que ese indice no existe o aparece sin numeración. o que cada vez que vayas a buscar algo te toque ir donde la señora bibliotecaria a solicitarle ese indice para que puedas buscar el tema deseado.

Siempre piensa que el usuario desea comodidad, Al usuario no le interesa si es bonito o feo el menú o si tiene el nuevo efecto floral QUE SALE POR TODAS LAS WEB O BLOGS y que son generados por “pinceles” de photoshop. así que cuando estés en la fase de desarrollo de PLANEACIÓN del menú debes de tener estas indicaciones:

  1. Menús sin enlaces JAVASCRIPT. (Por ejemplo http://web.presidencia.gov.co/ el menú Azul, tiene enlaces de “javascript:;” y es un error GIGANTE.
  2. Texto de enlaces simple y con palabras genéricas, por ejemplo si es un menú sobre una web de MÚSICA en el menú no debe ir elementos como: “Mire las ultimas noticias de la música”, sino “Ultimas noticias”, el usuario sabe que esta en una web de música e identifica que son noticias sobre música.
  3. Usar las etiquetas <ul> y <li>.
  4. No usar un menú con numeración, esto confunde al usuario y le da un sentido de JERARQUÍA, pensando que una sección es mas importante que la otra, al fin de cuentas la numeración es innecesaria.

Ya despues de estos consejos, pasamos a una mini-investigación que elabore para este post, primero vamos por partes.

Menú a la izquierda

Es conocido que los menús a la derecha se maneja bien por cuestiones de costumbre. Desde el inicio de la web se maneja esta teoría.

Recuerdo que hace años http://terra.com siempre manejaba su web totalmente a la izquierda. (http://web.archive.org/web/20010119001800/http://www.terra.com.co/ Versión de terra del 2001) tal vez por las pantallas que en ese tiempo se manejaba 800 x 600 y de echo menos resolución, también recuerdo http://uol.com.co (Ya esta muerta) http://web.archive.org/web/20000302200854/http://www.uol.com.co/ (En su versión del 2000). Entonces para mi HUMILDE OPINIÓN, se siguió manejando los menús en el lado izquierdo y la gente así lo acepto y se enseño.

Ahora, su concepto por lo cual se defiende el menú a la derecha es la costumbre del usuario.

Menú a la derecha

Se argumenta que los menús a la derecha no se debe manejar por lo que decíamos arriba, la costumbre, ademas de que el usuario baja su mirada después de ver el logotipo a el menú, que por lo general el logotipo esta en la parte izquierda superior.

esa es una razón por la cual afirman que no se debe usar a la derecha.

Menú arriba

El menú arriba es muy útil sobretodo cuando se maneja en sitios de noticias, pero hay que tener en cuenta que si son demasiados elementos, toca hacer sub menús organizados en “capas desplegables” que muestre apenas se ubique el ratón encima de los elementos principales.

¿Entonces, como elegir la mejor posición del menú en una web?

Según mi investigación, las falencias de el menú a la izquierda son el transporte del ratón por cuestión de el scroll del navegador, esto es incomodo para algunas personas zurdas, ademas para las diestras también.

Algunos softwares de Adobe (Macromedia) usan el tablón de herramientas a la derecha por la cercanía del ratón al botón [X] Rojo de cerrar ventana de la mayoría de las ventanas de la interfaz gráfica de los diferentes escritorios, también por el scroll.

Pantallazo-10

Ahora, otros sitios manejan también la navegación a la izquierda y un minimenú arriba y abajo, como lo es http://twitter.com

Pantallazo-11

Después de ver esto, pasamos a el sitio de noticias mas visitado en Colombia, http://eltiempo.com.co

Pantallazo-12

En este portal se maneja un menú arriba, muy bien ubicado y fácil de ver, con los submenu desplegables apenas el ratón pasa por encima.

Pantallazo-13

Aqui vemos la captura de GMAIL, donde su menú se encuentra en la parte izquierda.

¿A que vamos con estas capturas?, Pues analizando… la ubicación del menú depende del contenido que vayas a manejar. Si el contenido es de “muchos clicks”, osea una labor de búsqueda o de recorrido de gran parte de una web, se debe manejar el menú a LA DERECHA, esto permite que el usuario no mueva tanto el ratón, permitiéndole así menos tiempo en el sitio, y mucha mas efectividad. Los usuarios quiere todo en el menor tiempo posible.

Ahora si se maneja poca información como lo es una web de una empresa con los datos básicos, debemos manejar el menú a LA IZQUIERDA, por que se supone que la persona visitante va a demorar un poco mas de su tiempo leyendo los clientes… la sección “Quienes somos”, el contacto y otros enlaces de webs “cortas”.

Un ejemplo claro esta en los blogs, la mayoría de sus menús se maneja al lado derecho, hagan la prueba y se darán cuenta que la comodidad que nos ofrece tener ahí nomas la opción de darle click a las noticias de “febrero”, “marzo”, “Últimos post, etc… nos ofrece SATISFACCIÓN al tener todo cerca.

Las redes sociales como twitter y facebook manejan en algunas partes el menú a la derecha, por su gran contenido y enlaces. por que se sabe que los “adictos” a este tipo de web están constantemente haciendo click y si tuvieran que transportar el ratón de lado a lado se cansarían muy fácilmente.

WordPress maneja su menú de el administrador a la izquierda, por que se supone que el tiempo de estadía en una sección sera un poco moderado.

No confundamos el “Sidebar” con el menú, aunque lo puede contener no es lo mismo, la función del sidebar es darle herramientas adicionales al usuario para tanto la navegación o la interacción con el sitio web, un ejemplo ya mencionado es el editor de wordpress.

Pantallazo-14

Si vemos, al lado derecho encontramos las herramientas del editor, este viene siendo el SIDEBAR, y la explicación mas simple es que el menú principal toma un papel como de PROTAGONISTA y el sidebar le dieron el papel de AMIGO DEL PROTAGONISTA, lo cual marca una jerarquía y nos indica que aunque el sidebar es importante, no debe ser lo principal en la interfaz, su función es apoyar a todo el conjunto de elementos, que el usuario sepa que esta ahí pero que no sea lo esencial.

Ahora pasamos a los menús ubicados en la parte de arriba, son buenos cuando se necesita un espacio mayor en la parte de abajo, me explico: Cuando tenemos el sitio de MICROSOFT.COM

Pantallazo-15

identificamos que lo mas importante en este caso es promocionar su “Office Ultimate 2007″ con un valor de $59.95 (Bonito numero 5995) y vemos que el menú pasa a ser el AMIGO DEL PROTAGONISTA y el anuncio pasa a ser el PROTAGONISTA.

Entonces lo primero que ve la persona es el bonito numero $59.95 y dedica unos segundos en la mirada y luego si se ubica y dice: “Bueno, ¿Donde esta lo que yo busco?, ¡Oh! se encuentra en esa barra gris cuya tonalidad es diferente al fondo. voy a pasar mi ratón por esa barra y mientras tanto miro una palabra similar a lo que yo busco, que es ‘El internet explorer 8′”. así que se aprovecha ese espacio de abajo para otro fin.

También… vamos a pasar por: http://alt1040.com

Pantallazo-16

Observamos que el menú esta en la parte superior, ¿Por que?, la explicación es que el blog necesita la ubicación de una publicidad al lado derecho de el titulo y la imagen del articulo, por eso un menú en la parte derecha o izquierda generaría una perdida de espacio, tendría que ser un menú demasiado pequeño y eso por cosas de comodidad seria muy incomodo para el usuario.

Antes de terminar, no olvides que es muy importante que si ubicas el menú en la parte derecha, lo hagas con css, en el código primero debe estar el menú:

<ul>

<li>…

<h2> titulo…</h2>

<p>hola este es un párrafo…

Esto con el fin de que en navegadores de texto, o de pantalla pequeña se pueda ver primero el menú y después si el contenido del sitio web.

Creo que aquí llegamos al final del articulo, es una mini-investigación, y la idea es que ustedes mismos saquen conclusiones y comenten el articulo, no es la ultima palabra sobre el tema por que no existe una regla clara sobre la ubicación, pero lo mas importante es que siempre pienses en la comodidad del que va a probar el producto.

Por ultimo, Tengo ganas de hacer un laboratorio sobre este tema en mi universidad, voy a ver si me lo permiten y si se logra estaré subiendo los resultados aquí. Gracias.





Como utilizar el modrewrite (Basico)

23 09 2008

Hola =)

“La continuacion de Es importante una buena “url” (Modrewrite)

Ayer hablamos de el modrewrite, hoy vamos a ver como hacer un ejemplo sencillo, muy básico.

Primero que todo vamos a crear un archivo “.htaccess“, ¿como lo hacemos?, en Internet nos dan algunas opciones, pero les voy a mostrar 2 sencillas:

1º- Descargarme un archivo que ya contenga el punto delante .htaccess y re nombrarlo. Descargar .htaccess

2º- Renombrar un archivo mediante la consola de windows.
Pasito a pasito:
2.1- Crea un archivo en blanco .txt y llévalo a c:/ (llámalo mismamente nuevo.txt)
2.2-Ve a Inicio (abajo a la izquierda en XP) luego clicka en Ejecutar… , escribe cmd y se abrirá la consola de windows.
2.3- Para asegurarnos que estamos en c:/ escribimos en la consola cd c:\ (si no lo estamos nos llevará)
2.4- Renombramos el archivo escribiendo rename nuevo.txt .htaccess

Tomado de: http://blog-indomita.blogspot.com/2008/06/crear-un-archivo-htaccess-o-loquesea-en.html

Si estas en linux es demasiado sencillo, simplemente creas un archivo en blanco y lo re nombras así “.htaccess” sin comillas lógico.

Bueno, ya después de creado, sigue el paso de modificar el contenido, por obvias razones esta en blanco, entonces lo primero que vamos a hacer es escribir esto:

Options +FollowSymLinks
RewriteEngine on
Rewriterule ^(.*)\_(.*)\.html$ index.php?pagina=$1&nombre=$2

si vemos la estructura que tiene es la siguiente, donde aparezca ^(.*)\ nos va a indicar que es la primera variable de la url, y el siguiente ^(.*)\ es la segunda variable, entonces en este caso la primera variable en la url la indico con $1 y la segunda con $2 y así consecutivamente, si vemos hay un guion bajo “_“, este es un carácter que yo usare para separar las variables. entonces la url en el navegador quedaría:

5_articulo-sobre-modrewrite.html

si vemos el 5 indica la pagina osea la variable $1, y el texto “articulo-sobre-modrewrite” nos indica la segunda variable osea $2.

Hagamos un ejemplo, digamos que se necesita por medio de modrewrite hacer una url bonita que quede por ejemplo,

la-pagina-de_andreslara501_lanzada-en-el_2008_y-el-es-de_colombia.html

¿Como la hacemos?, sencillo, la clave esta en saber identificar las variables.

Options +FollowSymLinks
RewriteEngine on
Rewriterule la-pagina-de_^(.*)\_lanzada-en-el_(.*)\_y-el-es-de_(.*)\.html$ index.php?nombre=$1&ano=$2&pais=$3

Ahora si vamos con la explicación, los ^(.*)\ van ubicados donde ira las variables en la url, como me muestra el ejemplo el primer ^(.*)\ contiene el nombre que es ANDRESLARA501 y es la variable $1, el segundo ^(.*)\ contiene el año y es la variable $2 que contiene 2008, y la tercera variable es $3 que contiene el país osea COLOMBIA.

Así podemos jugar con el modrewrite, haciendo muchas cosas muy vacanas (Sinónimo de chevere, divertido, espectacular, palabra muy usada en Colombia) así que anímate, entre mas lo uses en tus aplicaciones php, mejor serán, por que tus usuarios comprenderán mejor la url.

Recuerda que el archivo .htaccess va en la carpeta donde esta el archivo .php que le hagamos el tratamiento del modrewrite.

Chau y éxitos

Dato curioso: :P Escribiendo al final casi coloco “Modrewitter” :P jajajaja hay dios :P





Separar los scripts del html

23 02 2008

html javascript, css

Hay un error común en nuestros sitios web, que es de principiante y es el de incluir código externo en el html, me refiero a esto:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”
http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<style type=”text/css”>
<!–
.style1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
}

–>
</style>
</head>

<body>
<span class=”style1″>Hola mundo</span>
</body>
</html>

Eso es ERRÓNEO, ¿Por que?, es sencillo, imagina que entran a tu web desde un móvil, este móvil solo admite HTML, no te admite css. que va a pasar… tu web… se va a cargar mas lento, la simple razón es que esta cargando código css que al móvil no le va a servir, por eso siempre digo que lo que es css, javascript y otros siempre vayan en un archivo aparte!.

Entonces lo correcto seria:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”
http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<link href=”css/fuentes.css” id=”stilecss” rel=”stylesheet” type=”text/css” />

<title>Untitled Document</title>

</head>

<body>
<span class=”style1″>Hola mundo</span>
</body>
</html>

Lo que esta marcado con naranja es el llamado del archivo css externo, esto nos permite que no coloquemos directamente el código en el html. y así cuando el navegador web del celular, cuando vaya pasando por esa instrucción vera que es un archivo .css y dirá :O ami no me interesa el css, mejor sigo derecho y sigo mirando las demás etiquetas, en cambio si no tubieramos eso el navegador estaría diciendo font-family: Arial, Helvetica, sans-serif; , que es eso1! :S no entiendo, font-size: 18px; , no entiendo eso tampoco, ven… así que perderíamos segundos de carga y el usuario dinero en carga :P .





Mucho ojo con este error en css

8 01 2008

:P Hoy estoy haciendo una aplicacion llamada ARMIN, un gestor de proyectos, y me encontre un caso peculiar que ya me habia pasado mucho antes, hay veces por pereza o por descuido no le damos espacio a algunas propiedades en css, y les voy a mostrar el caso:

tenemos:
Captura error
Esa es la esquina del diseño de la aplicacion la cual estoy cortando y diagramando en css, ahora, todo estaba bien… este es el codigo en css para generar solo el cuadro que dice CONTACTOS:
  

#menu_derecho{
      margin:11px 6px 0px 6px;
      background:url(‘../img/fondo_derecha.gif’)#00CCCC repeat-x;
      float:right;
      width:185px;
      height:300px;

  }

:) todo super bien, en el maldito firefox, que no me gusta pero toca testear la aplicacion ahi, salio perfecto, en mi opera preferido tambien, y lo veo en ie7 y adivinen, :S tenemos problemas!, una captura para que se den cuenta.

Vista desde la zorra, :P :
Zorra
Vista desde el ie
Ie
Y el problema radica en que al momento de declarar la propiedad BACKGROUND,       

background:url(‘../img/fondo_derecha.gif’)#00CCCC repeat-x;

no le di espacio entre gif’)# , la forma correcta es gif’) # ,asi es nuestro amigo explorer :P y sus mañas :) . chau!





Quieres saber como se ve tu web desde un movil?

6 01 2008

Cuando haces una web, muchas veces deseas saber como seria tu web desde un móvil, entonces desde hace algún tiempo, opera incorporo una opción para ello. la cual modifica el navegador y te permite ver tu web como desde un móvil.

Primero, abrimos www.opera.com :
Opera captura 1

Nos ubiucamos en le menu que dice DOWNLOAD y le damos en OPERA DESKTOP:
Seleccionar descarga
Descargamos el opera y lo instalamos.
Opera Home
Ahi tenemos la foto de opera instalado, ahora simplemente abrimos la pagina que deseamos ver en forma movil, en este caso vamos a utilizar http://buzzeando.com/ una pagina al azar que encontre en wordpress:

Opera buzz
ahora simplemente le damos SHIFT + F11 y listo!!!!
Teclado
Listo tenemos una pagina vista como desde un celular, gracias al unico OPERA :D

Movil

Si quieren volver a el estado anterior, ale estado full le dan SHIFT + F11.

Hay un dato para recordar, y es que DREAMWEAVER incorpora en su software una vista de movil, y este usa la ultima version del opera.