<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head><meta name="viewport" content="width=device-width,initial-scale=1.0" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Concreta Capacitación</title>
</head>
<body bgcolor="#FFFFFF" style="cursor: auto;margin: 0 auto;padding: 0;-webkit-font-smoothing: antialiased;-webkit-text-size-adjust: none;height: 100%;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif; line-height: 1.65; "><!-- HEADER --><!--header-->
<table style="margin:0 auto" width="100%">
<tbody>
<tr>
<td> </td>
<td align="left" style="border-bottom: solid #FFA73B 1px;" width="600"><img alt="Concreta Capacitación" height="64" src="http://concreta.uy/image/logoG4.jpg?id=2cc5eaaf055ebd45297c8ca1bd54b4c8" /><a href="http://concreta.uy/cursos-en-linea/?utm_source=elastic&utm_medium=mailing&utm_campaign=PSUX20210120&utm_content=Navegación y contenido: Mega-menús" style="color: #2BA6CB;"> </a></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td align="center" style="padding:10px;" width="600">
<p>Taller de Diseño de la Interacción<br />
<a href="https://concreta.uy/taller-intensivo-de-diseno-de-la-interaccion/?utm_source=elastic&utm_medium=mailing&utm_campaign=CALENDARIO202112&utm_content=Navegación y contenido: Mega-menús"><strong>Último comienzo del año: 27 de agosto de 2023</strong></a><br />
Para conocer más sobre las distintas opciones, <span style="font-size: 16px; margin-top: 24px"><a href="https://concreta.uy/taller-intensivo-de-diseno-de-la-interaccion/?utm_source=elastic&utm_medium=mailing&utm_campaign=CALENDARIO202112&utm_content=Navegación y contenido: Mega-menús#wpcf7-f1248-p2072-o1">contactá a un docente</a></span></p>
</td>
<td> </td>
</tr>
</tbody>
</table>
<!--contendio-->
<p style="margin-bottom: 10px;font-weight: normal;font-size: 18px;line-height: 0.2;"> </p>
<table style="margin:0 auto" width="100%">
<tbody>
<tr>
<td> </td>
<td align="left" width="600"><div class="newsletters_content"><h1 class="Landing-title" style="font-size: 36px;margin-top: .25rem;margin-bottom: .25em;line-height: 1.15;letter-spacing: -1px;font-weight: 500;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;text-transform: none;text-align: center">Navegación y contenido I: Mega-menús</h1>
<p class="Landing-description" style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 1.5rem;line-height: 1.5;font-weight: 400;color: #333;text-align: center">Además de permitir recorrer un sitio, la navegación debe transmitir un panorama del contenido que abarca, resumiéndolo y jerarquizándolo. Esto incluye también la funcionalidad.</p>
<p><a href="https://concreta.uy/biblioteca/navegacion-y-contenido/"><img src="https://concreta.uy/wp-content/uploads/sumario-revista-hola-enero-2005600.png" alt="sumario revista hola enero 2005" style="margin-top: 0.7rem;margin-bottom: 0.7rem;border: 0;width: 100%"></a></p>
<p class="has-text-align-center has-small-font-size" style="font-size: 16px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px;text-align: center">Las revistas de variedades y famosos suelen tener buenos sumarios que conjugan la navegación (índice página a página) con un panorama curado y jerarquizado del contenido.</p>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Siempre tenemos en cuenta que un sitio Web, al igual que una App o aplicación de escritorio, tiene que tener un sistema de navegación que permita encontrar y acceder a cada pieza de contenido. También sabemos que en la medida que el universo de información crece, la complejidad de ese sistema de navegación crece. </p>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Lo que no es tan frecuente que tengamos presente, al menos en forma explícita, es el rol de comunicación que tiene el sistema de navegación, que si está bien concebido y diseñado funciona como un potente sistema de resumen del conjunto de contenido sobre el que permite navegar. </p>
<p class="destaque" style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px;font-weight: 600;padding: 1.5em;background-color: #E9E9E9">Un sistema de navegación bien concebido y diseñado funciona como un potente sistema de resumen del conjunto de contenido sobre el que permite navegar.</p>
<h2 style="font-size: 30px;margin-top: 1.625em;margin-bottom: .25em;line-height: 1.25;font-weight: 500;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif">Menús y mega-menús</h2>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Cuando un menú contiene las categorías electrodomésticos, TV y audio, celulares y computación, además de permitirnos acceder a cada una de ellas nos brinda un panorama sintético y de calidad de la oferta de productos de la tienda. </p>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">La pregunta que sigue es: ¿podemos ir más allá en esta línea de razonamiento? La respuesta es afirmativa: hay múltiples formas de agregar contenido y funcionalidad más allá del tradicional menú “Windows 95”, en el que cada opción tiene una etiqueta de hasta tres palabras y se van abriendo submenús en cascada, hasta llegar a la opción deseada. Nótese que en Windows 95 hay además un ícono, que en algunos casos es irrelevante como en Accesorios o Inicio, pero en otros como configuración o MS-DOS es significativo. </p>
<p><img src="https://concreta.uy/wp-content/uploads/menu-de-windows-95600.png" alt="menú de windows 95" style="margin-top: 0.7rem;margin-bottom: 0.7rem;border: 0;width: 100%"></p>
<p class="has-small-font-size has-text-align-center" style="font-size: 16px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px;text-align: center">En el menú de Windows 95 la única información que brinda el menú es una breve etiqueta sobre cada aplicación o contenido, con un ícono que en algunos casos puede ser significativo.</p>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Una de las formas de agregar contenido más elaboradas es lo que se denomina <strong>mega-menú</strong>, un mecanismo de navegación en el que se elimina el criterio de que el menú debe ocupar el menor espacio posible en la pantalla, que parece dominar al menú Windows 95 y cuando se despliega, agrega además de las opciones de navegación tanto información relevante como funcionalidad disponible en el contenido al que se accederá navegando. </p>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Los test con usuarios y el análisis estadístico muestran que los mega-menús funcionan muy bien, y que cumplen a cabalidad con su propósito, ya sea exponer varios niveles de la categorización de contenido, agregar información relevante o brindar herramientas y funcionalidad. </p>
<p><img src="https://concreta.uy/wp-content/uploads/megamenu-en-chery600.png" alt="megamenú en chery.com" style="margin-top: 0.7rem;margin-bottom: 0.7rem;border: 0;width: 100%"></p>
<p class="has-small-font-size has-text-align-center" style="font-size: 16px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px;text-align: center">La automotriz china Chery incluye en el menú fotografías y detalles de las características de cada modelo. Podría ir más allá fácilmente, por ejemplo reemplazando la imagen fija por una galería, o agregando la posibilidad de descargar el folleto. </p>
<p><img src="https://concreta.uy/wp-content/uploads/megamenu-en-BPS600.png" alt="megamenu en el sitio de BPS" style="margin-top: 0.7rem;margin-bottom: 0.7rem;border: 0;width: 100%"></p>
<p class="has-small-font-size has-text-align-center" style="font-size: 16px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px;text-align: center">BPS ofrece en su mega-menú dos clasificaciones complementarias de las distintas gestiones, acompañadas de accesos directos a contenidos y funcionalidades de alto tráfico.</p>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Un mega-menú debe ser concebido como un nuevo espacio de interacción, que se despliega para atender un cambio en el objetivo del usuario. Si este recurrió al sistema de navegación es porque el contenido y funcionalidad que tiene a disposición no es el que precisa, y por tanto puede ser ocultado (lo que implica descartarlo de forma momentánea) y reemplazado por otro paquete de contenido y funcionalidad, que por supuesto debe poner a disposición las opciones de navegación pero que puede incluir además cualquier otro elemento de interfaz que resulte útil para cumplir el nuevo objetivo.</p>
<p class="destaque" style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px;font-weight: 600;padding: 1.5em;background-color: #E9E9E9">Un mega-menú debe ser concebido como un nuevo espacio de interacción, que se despliega para atender un cambio en el objetivo del usuario.</p>
<h2 style="font-size: 30px;margin-top: 1.625em;margin-bottom: .25em;line-height: 1.25;font-weight: 500;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif">Mega-menús en móvil</h2>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">El mega-menú nació en el escritorio y ese es el ámbito donde se luce con contundencia. Sin embargo, es esperable que en un sitio Web más de la mitad de los usuarios utilicen un dispositivo móvil y en una app el 100%. Esto exige un cuidado especial para que el mega-menú siga siendo una herramienta de navegación que agrega contenido y funcionalidad además de acceso. </p>
<p><img src="https://concreta.uy/wp-content/uploads/megamenu-Itau-en-escritorio600.png" alt="Megamenú Itaú en escritorio" style="margin-top: 0.7rem;margin-bottom: 0.7rem;border: 0;width: 100%"></p>
<p class="has-small-font-size has-text-align-center" style="font-size: 16px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px;text-align: center">El Banco Itaú despliega en el escritorio un Megamenú con acceso, funcionalidad y contenido.</p>
<div class="wp-block-image"><img src="https://concreta.uy/wp-content/uploads/megamenu-Itau-en-movil600.png" alt="Megamenú Itaú en movil" style="margin-top: 0.7rem;margin-bottom: 0.7rem;border: 1px solid #cccccc;width: 100%;padding: 2px"></p>
<p class="has-small-font-size has-text-align-center" style="font-size: 16px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px;text-align: center">En el móvil, se pierde todo el contenido y funcionalidad del mega-menú y se transforma en un menú de texto</p>
</div>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Que en el móvil habrá mucho menos espacio es el punto de partida y un dato del problema, pero es muy frecuente encontrar implementaciones en las que queda a la vista que en móvil se abandonó completamente la idea de megamenú, inclusive cuando queda una cantidad de espacio libre significativa. </p>
<div class="wp-block-image"><img src="https://concreta.uy/wp-content/uploads/megamenu-en-chery-movil600.png" alt="Megamenú en Chery móvil" style="margin-top: 0.7rem;margin-bottom: 0.7rem;border: 0;width: 100%"></p>
<p class="has-small-font-size has-text-align-center" style="font-size: 16px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px;text-align: center">Chery mantiene el megamenú en móvil. Solo falta ajustar el ancho de las etiquetas para que no se corten. </p>
</div>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">La receta que probablemente produzca el mejor resultado, tanto para el mega-menú como para cualquier otro aspecto de la interfaz móvil, sea aplicar rigurosamente el criterio <em>mobile first</em>, diseñando completamente el mega-menú primero en móvil, incluyendo todo el contenido y funcionalidad para después encarar su versión en escritorio. </p>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Y siempre recuerde mirar los diseños para móvil en un móvil, y no solamente en un monitor de 24 pulgadas.</p>
<p class="destaque" style="font-size: 16px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px;font-weight: 600;padding: 1.5em;background-color: #E9E9E9">Próximas entregas de Navegación y contenido:<br />– Tarjetas y carpetas<br />– El menú de Windows a lo largo de sus versiones.</p>
</div></td>
<td> </td>
</tr>
</tbody>
</table>
<!--inscripcion-->
<p style="margin-bottom: 10px;font-weight: normal;font-size: 18px;line-height: 1.6;"> </p>
<table style="margin:0 auto" width="100%">
<tbody>
<tr>
<td> </td>
<td align="left" width="600">
<table align="left" class="column" style="background-color: #ebebeb; float: left;min-width: 279px;">
<tbody>
<tr>
<td style="padding: 15px;">
<h3 style="font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height: 1.1;margin-bottom: 8px;margin-top: 18px;color: #000;font-weight: 400;font-size: 27px;"><a href="https://concreta.uy/taller-intensivo-de-diseno-de-la-interaccion/?utm_source=elastic&utm_medium=mailing&utm_campaign=CALENDARIO202112&utm_content=Navegación y contenido: Mega-menús">Taller de Diseño de la Interacción</a></h3>
<p style="margin-bottom: 8px;font-weight: normal;font-size: 18px;line-height: 1.6;">Un entrenamiento práctico con tutoría para desarrollar y/o profundizar tus habilidades como diseñador, a través del análisis del proceso del Diseño.</p>
<p style="margin-bottom: 8px;font-weight: normal;font-size: 18px;line-height: 1.6;">Último comienzo del año: <strong>29 de agosto</strong></p>
<p style="margin-bottom: 8px;font-weight: normal;font-size: 18px;line-height: 1.6;">Si querés conocer más detalles, o hablar con los docentes, <a href="https://concreta.uy/taller-intensivo-de-diseno-de-la-interaccion/?utm_source=elastic&utm_medium=mailing&utm_campaign=CALENDARIO202112&utm_content=Navegación y contenido: Mega-menús#wpcf7-f1248-p2072-o1">no dudes en contactarnos</a>.</p>
</td>
</tr>
</tbody>
</table>
<table cellpadding="10" cellspacing="20" style="background-color: #ebebeb; width: 100%;">
<tbody>
<tr>
<td align="center" bgcolor="#1947a1" height="27" style="padding:10px; -webkit-border-radius: 27px; -moz-border-radius: 27px; border-radius: 27px; color: #1947a1; display: block;" width="250"><a class="concreta" href="https://concreta.uy/taller-intensivo-de-diseno-de-la-interaccion/?utm_source=elastic&utm_medium=mailing&utm_campaign=CALENDARIO202112&utm_content=Navegación y contenido: Mega-menús#inscripciones" style="color: #FFFFFF;font-size: 18px;font-weight: bold;font-family: sans-serif;text-decoration: none;line-height: 27px;width: 100%;display: inline-block;background-color: #1947a1!important;">Inscripciones</a></td>
</tr>
</tbody>
</table>
</td>
<td> </td>
</tr>
</tbody>
</table>
<!--desuscribirse-->
<p style="margin-bottom: 10px;font-weight: normal;font-size: 18px;line-height: 1.6;"> </p>
<table style="margin:0 auto" width="100%">
<tbody>
<tr>
<td> </td>
<td align="center" width="600">
<p style="margin-bottom: 10px;font-weight: normal;font-size: 14px;line-height: 1.25;"><a href="http://tracking.concreta.uy/tracking/unsubscribe?d=4hzrtSdW5a17kKZe7FpQhw_9QFelq4USNFTPIY9_6Fa4Kt7i1Fwkw6rFvZ6_SVJNGhvYsHu5kfqKzOMv1vCMuBDWM9sa21HQlKQfSFS8tS2pDinQtlrxsvU1C2TNJXggBsZGz7z3oheGRTYTM8H7rWp6jguGvO-PVl4c9Uxbze3sw09kp-uImEiC_ypKjAl3ulcCTWbCADyElDU5NYoGPHg1oeLHqVn2PMH12NHRuzs-WrNe3yoKyB_gX_VU8t3A1l76yOMyBs52vEp1twnOjy_COnICxZypHIsueGMfdbkuOP2FgwFP_lB356_usjxXFZL5oi1ZsuBu7VzpHJE-oogLWwNLOPD8cVgLnB1SaBWdgVFKva79xj3NXOjIoZEVf_b9Grlb02NS3rQVriV_pkWakzNfCXizYITy103Q_sR-kpwWh8MH-qcAIcY1bkrP90ag8V0B9LWZcOF7ac6S_HLzh-1-2XTeaaNeKlGmn7c4xi3WfwTaJaHijo6bt26QHDemCYH30wiy-RLpK3SftSyRFqwgb_OqsFcWGiN5qBQ8uTKQ52qtjT9s-_-RCij9Ww2" style="color:#666666;">No quiero recibir información sobre cursos de Concreta</a></p>
</td>
<td> </td>
</tr>
</tbody>
</table>
<p style="margin-bottom: 10px;font-weight: normal;font-size: 18px;line-height: 1.6;"> </p>
<div style="text-align:center; background-color:#fff;padding-top:10px;padding-bottom:10px;font-size:8pt;font-family:sans-serif;"><p style="text-align:center;text-decoration:none;color:#666;">Concreta, Soriano 903 of 501, Montevideo, Montevideo, 11100, Uruguay, concreta.com.uy</p></div></body>
</html>