{"id":2233,"date":"2017-02-09T11:36:26","date_gmt":"2017-02-09T10:36:26","guid":{"rendered":"https:\/\/www.integratecnologia.es\/la-innovacion-necesaria\/?p=2233"},"modified":"2023-12-26T17:39:05","modified_gmt":"2023-12-26T16:39:05","slug":"10-consejos-para-construir-una-web-perfecta","status":"publish","type":"post","link":"https:\/\/www.integratecnologia.es\/la-innovacion-necesaria\/10-consejos-para-construir-una-web-perfecta\/","title":{"rendered":"10 consejos para construir una navegaci\u00f3n web perfecta"},"content":{"rendered":"

\u00bfHas participado alguna vez en el desarrollo de una web? Si es as\u00ed, te habr\u00e1s dado cuenta de lo complicado que es definir la navegaci\u00f3n del sitio. Cada persona a la que preguntes tendr\u00e1 una opini\u00f3n diferente basada, de manera habitual, en su experiencia personal.<\/p>\n

Cuando hablamos de sitios web, el sistema de navegaci\u00f3n<\/strong> se convierte en la base sobre la que podemos sustentar el resto de nuestras p\u00e1ginas. Un buen men\u00fa de navegaci\u00f3n debe estar construido pensando en nuestros objetivos de negocio<\/strong> y nuestra audiencia<\/strong> tipo (para conocer c\u00f3mo ha cambiado esta audiencia, pod\u00e9is ver le art\u00edculo El marketing tradicional ha muerto: Bienvenido a los Buyer<\/em> Persona<\/a>).<\/p>\n

Si vas a comenzar un nuevo proyecto, ten en cuenta estos 10 consejos<\/strong> que, m\u00e1s que ayudarte a hacer un men\u00fa perfecto, te ayudar\u00e1n a no cometer errores graves.<\/strong><\/p>\n

1. No pienses tu navegaci\u00f3n en funci\u00f3n a c\u00f3mo lo hace tu competencia<\/h4>\n

\u00bfHas pensado en la posibilidad de que tu competencia se est\u00e9 equivocando? Puede que su navegaci\u00f3n haya sido una decisi\u00f3n del gerente quien tuvo una revelaci\u00f3n m\u00edstica tras una paella de domingo en la que habl\u00f3 con su cu\u00f1ado Jacobo.<\/p>\n

Es muy habitual encontrarse empresas con un men\u00fa de navegaci\u00f3n err\u00f3neo \u00fanicamente porque lo copiaron<\/strong> de la competencia y \u00e9stos, a su vez, lo copiaron de otros. El problema viene cuando la empresa original que pens\u00f3 el men\u00fa, confi\u00f3 en Jacobo y no en el consejo profesional de expertos en usabilidad<\/strong>. O quiz\u00e1s, simplemente, se pens\u00f3 hace muchos a\u00f1os y ha de adaptarse al presente.<\/p>\n

2. Utiliza un men\u00fa horizontal y sit\u00faalo arriba a la derecha.<\/h4>\n

El usuario espera que el men\u00fa sea horizontal<\/strong> y se sit\u00fae en la parte superior derecha. Incluso grandes empresas, que se pueden permitir ciertas licencias en usabilidad, construyen sus men\u00fas de esta forma.<\/p>\n

Lo hace Amazon:<\/p>\n

\"amazon\"<\/a><\/p>\n

 <\/p>\n

 <\/p>\n

Lo hace Google<\/p>\n

\"google\"<\/a><\/p>\n

 <\/p>\n

 <\/p>\n

\u00bfPodemos hacer un men\u00fa vertical o utilizar uno horizontal situado a la izquierda? Por supuesto que s\u00ed. Todo depende de la edad de la audiencia<\/strong> objetivo, de las necesidades del proyecto<\/strong>, e incluso de la excusa que queramos encontrar para hacerlo a nuestra manera. Pero, por el momento, el usuario espera encontrar el men\u00fa arriba a la derecha.<\/strong><\/p>\n

3. No pongas m\u00e1s de 5 o 6 elementos en tu men\u00fa principal<\/h4>\n

\u00bfSabes lo que hacemos los usuarios cuando nos ofrecen muchas posibilidades para realizar en una p\u00e1gina? Nada. No hacemos nada. Nos vamos, nos vamos porque nos sentimos in\u00fatiles y nos frustra.<\/p>\n

Si somos capaces de definir nuestro negocio en 30 segundos, \u00bfpor qu\u00e9 no hacer lo mismo con nuestra navegaci\u00f3n? Tenemos que ser capaces de sintetizar en 5 o 6 elementos<\/strong> (como m\u00e1ximo) nuestro men\u00fa principal<\/strong>. Puedes promocionar otras secciones que te interese destacar a trav\u00e9s de la barra lateral,<\/strong> destacados, en el pie de p\u00e1gina o utilizando un men\u00fa secundario.<\/p>\n

Hacer esto ayuda a que el usuario sepa qu\u00e9 puede hacer en cada momento. Un gran ejemplo de men\u00fa con pocos elementos lo encontramos en el sitio web de Torres Burriel<\/a>:<\/p>\n

\"torres-burriel\"<\/a><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Es un men\u00fa que contiene, \u00fanicamente, tres elementos: Qu\u00e9 hacemos, Blog y Contacto<\/strong>. Cualquier otra informaci\u00f3n podemos encontrarla dentro de esas secciones. Podr\u00edan haber puesto un enlace a Inicio, pero entiendo que, por la tipolog\u00eda de sus visitantes, han decidido prescindir de ese enlace y situarlo en el logotipo que, como espera el usuario, est\u00e1 arriba a la izquierda.<\/p>\n

4. Ordena los elementos de tu men\u00fa por importancia<\/h4>\n

El efecto psicol\u00f3gico de primac\u00eda<\/strong> afirma que se presta una mayor atenci\u00f3n a las informaciones presentadas en primer lugar<\/strong>. Por otro lado, el efecto de recencia<\/strong> afirma que la informaci\u00f3n presentada en \u00faltimo lugar<\/strong> es recordada con facilidad.<\/p>\n

Un buen ejemplo de estructura de men\u00fa web de una empresa de servicios ser\u00eda: Inicio – Servicios – \u00bfQui\u00e9nes somos? – Blog – Contacto.<\/strong><\/p>\n

5. Cuidado con el men\u00fa hamburguesa para m\u00f3viles<\/h4>\n

Seguro que has visto m\u00e1s de una vez tres l\u00edneas apiladas en horizontal cuando navegas con tu Smartphone<\/strong>:<\/p>\n

\"hamburguesa\"<\/a><\/p>\n

Este tipo de icono, com\u00fanmente denominado \u201chamburguesa<\/strong>\u201d, anima a los usuarios a hacer clic sobre \u00e9l, descubriendo el men\u00fa principal del sitio web.<\/p>\n

Seg\u00fan los estudios de Nielsen, se recomienda usar el el icono \u00abhamburguesa\u201d junto con un texto que ponga Men\u00fa.<\/strong> De esta forma damos una pista al usuario sobre lo que va a encontrarse una vez que haga clic. Tambi\u00e9n se recomienda enmarcar<\/strong> de alguna forma el icono para que el usuario reconozca esa zona como un bot\u00f3n.<\/p>\n

Dentro de unos a\u00f1os es posible que, al igual que ocurre con el icono de la lupa, la pr\u00e1ctica totalidad de los usuarios reconozcan el icono \u00abhamburguesa\u201d. Por el momento, hay un alto porcentaje de usuarios que no sabe qu\u00e9 es ni para qu\u00e9 sirve. De hecho, Google en su versi\u00f3n de escritorio, utiliza otro icono para esconder el men\u00fa:
\n\"menu-google\"<\/a>Si tienes pocos elementos en tu men\u00fa \u00bfPor qu\u00e9 no te planteas dejarlos a la vista? No habr\u00e1 posibilidad de confusi\u00f3n para tus usuarios.<\/p>\n

Es muy posible que muchos de tus usuarios sean m\u00f3viles. Piensa en ellos y en c\u00f3mo quieres que perciban tu navegaci\u00f3n.<\/p>\n

Los estudios de patr\u00f3n de uso de m\u00f3viles revelan que, independientemente de la posici\u00f3n y n\u00famero de manos utilizadas, la mejor zona para colocar un men\u00fa en un m\u00f3vil<\/strong> es la inferior <\/strong>(pod\u00e9is ver m\u00e1s informaci\u00f3n sobre los h\u00e1bitos en navegaci\u00f3n m\u00f3vil en este estudio de Uxmatters<\/a>).<\/p>\n

6. Escoge palabras y frases claras y concisas<\/h4>\n

El copywriting<\/em> <\/strong>de tu navegaci\u00f3n es muy importante. De nuevo volvemos a aquello que espera el usuario<\/strong>. Gu\u00e1rdate la creatividad para otras zonas de tu web. En tu navegaci\u00f3n el usuario tiene que ver, claramente, d\u00f3nde va a ir al hacer clic. No puedes poner algo con la excusa de crear curiosidad porque no lo vas a conseguir.<\/p>\n

Puedes ayudarte de iconos<\/strong> para dar pistas, pero nunca emplearlos sin ayuda de texto explicativo. Es cierto, Facebook y Apple emplean iconograf\u00eda sin texto de ayuda, pero lamentablemente no tenemos ese nivel de reconocimiento de marca.<\/p>\n

7. Utiliza las migas de pan: son de gran ayuda para el SEO<\/h4>\n

Las migas de pan<\/strong> son una navegaci\u00f3n que indica la secci\u00f3n<\/strong> y subsecci\u00f3n<\/strong> en la que nos encontramos. Se suele colocar bajo el men\u00fa y justo antes del contenido principal de cada p\u00e1gina:<\/p>\n

\"migas-de<\/a><\/p>\n

De forma habitual funcionan como enlaces<\/strong>, ayudando a mejorar el n\u00famero de p\u00e1ginas vistas<\/strong> por el usuario y alargando el tiempo<\/strong> de navegaci\u00f3n. Son especialmente \u00fatiles en sitios web de noticias, blogs y tiendas online. El usuario suele provenir de una b\u00fasqueda que ha realizado en Google y, de esta forma, le ayudamos a conocer la estructura<\/strong> de la p\u00e1gina de una forma f\u00e1cil.<\/p>\n

Colocando migas de pan conseguimos, adem\u00e1s, numerosos enlaces internos<\/strong> que nos ayudar\u00e1n a posicionar<\/strong> nuestra p\u00e1gina.<\/p>\n

8. Cuidado con los submen\u00fas y mega men\u00fas. No son para todo tipo de sitios<\/h4>\n

Muchas veces, al situarnos sobre un elemento de men\u00fa, aparece un segundo nivel de men\u00fa que permanec\u00eda escondido:<\/p>\n

\"submenu\"<\/a><\/p>\n

Lo preferible es que no exista este tipo de submen\u00fas ya que estamos ocultando al usuario nuestra navegaci\u00f3n. Si para nuestro objetivo es imprescindible la existencia de este segundo nivel porque, por ejemplo, tenemos una tienda online<\/strong>, es preferible que el usuario sea el que active con un clic<\/strong> su aparici\u00f3n.<\/p>\n

Los mega men\u00fas<\/strong> son una tendencia en alza para tiendas online. Estudia muy bien como estructurar<\/strong> estos men\u00fas y c\u00f3mo se van a mostrar a los usuarios m\u00f3viles<\/strong>.<\/p>\n

9. Potencia la b\u00fasqueda interna<\/h4>\n

Una caja de b\u00fasqueda<\/strong> cercana al men\u00fa de navegaci\u00f3n permite a los usuarios encontrar la informaci\u00f3n que necesitan. En tiendas online con miles de productos o p\u00e1ginas con muchas categor\u00edas permite un ahorro de tiempo<\/strong> al usuario que, muchas veces, no sabe en qu\u00e9 categor\u00eda va a encontrar algo.<\/p>\n

Gracias a la implementaci\u00f3n de un buscador podemos, adem\u00e1s, conocer qu\u00e9 palabras buscan los usuarios, con lo que podemos hacer mejoras<\/strong> que permitan aumentar la conversi\u00f3n<\/strong> de nuestro sitio.<\/p>\n

10. Peque\u00f1os tips<\/em> en forma de listado<\/strong><\/p>\n