<!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/pepe.jpg?id=62f51174f931c1ef992b467d3f5da78d" /><a href="http://concreta.uy/cursos-en-linea/?utm_source=elastic&utm_medium=mailing&utm_campaign=PSUX20210120&utm_content=De cómo Mercado Libre derrotó al cajero automático" style="color: #2BA6CB;"> </a></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td align="center" style="padding:10px;" width="600">
<p>Un curso para introducirte en el diseño UX profesional<br />
<strong><a href="https://concreta.uy/taller-intensivo-de-diseno-de-la-interaccion/?utm_source=emm171&utm_medium=mailing&utm_campaign=BuscarLectores&utm_content=De cómo Mercado Libre derrotó al cajero automático">Taller Intensivo de Diseño de la Interacción</a></strong><br />
Próximo comienzo: <strong>12 de octubre</strong> - <span style="font-size: 16px; margin-top: 24px"><a href="https://concreta.uy/contacto/">Hablá con 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"><br />
<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">Menús vs. Filtros</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">Un viejo adagio dice que se puede reconocer a un ingeniero de sistemas pidiéndole que dibuje un árbol: pondrá la raíz arriba y las hojas abajo. Allí está el punto central de la diferencia entre navegar y filtrar.</p>
<p><a href="https://concreta.uy/biblioteca/menus-vs-filtros-o-el-cajero-automatico-contra-mercado-libre/?utm_source=elastic&utm_medium=mailing&utm_campaign=TIDI20210907&utm_content=De cómo Mercado Libre derrotó al cajero automático"><img src="https://concreta.uy/wp-content/uploads/ilustracion-de-arbol-grafo-invertido-Wide600.png" alt="ilustracion de arbol-grafo invertido" style="margin-top: 0.7rem;margin-bottom: 0.7rem;border: 0;width: 100%"></a></p>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">El menú de texto fue probablemente la primera herramienta de interacción que apareció en las interfaces más allá de la linea de comandos pura y dura. La idea es sencilla pero efectiva: se ordenan todos los comandos y contenidos en un árbol (en el sentido informático del término: raíz arriba y hojas abajo), se muestran en la pantalla y se navega de arriba a abajo (por los nodos: elementos del árbol que tienen hijos) hasta llegar al comando específico (hoja: elemento del árbol sin hijos). En las versiones más primitivas, la navegación se realizaba asociando un número a cada opción que luego se digita para seleccionarla. </p>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">La mejora de facilidad de uso que trajo la introducción de menús de texto fue enorme, porque siguen fielmente la recomendación de la <a href="https://concreta.uy/biblioteca/reconocer-es-mejor-que-recordar-heuristica-6/?utm_source=elastic&utm_medium=mailing&utm_campaign=TIDI20210907&utm_content=De cómo Mercado Libre derrotó al cajero automático">regla heurística 6: reconocer es mejor que recordar</a>. El menú de texto transformó el problema Pienso y Entiendo de escribir comandos en el problema Leo y Entiendo de seleccionar opciones. El menú de texto llega hasta nuestros días y está presente en prácticamente todas las interfaces, en general con un método de selección en base a punteros y clicks, sean de mouse o táctiles.</p>
<p><img src="https://concreta.uy/wp-content/uploads/menu-de-texto600.png" alt="clásico menú de texto" 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">Clásico menú de texto</p>
<p><img src="https://concreta.uy/wp-content/uploads/menu-del-cajero-automático600.png" alt="menú de un cajero automático" 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 cajero automático sigue utilizando el menú de texto basado en un árbol de opciones</p>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Más allá de sus virtudes, la navegación del árbol con la raíz arriba y las hojas abajo tiene algunas limitaciones importantes que imponen limitaciones a su utilidad, en algunos casos importantes. </p>
<ul>
<li style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px"> <strong>Igual es necesario conocer (o imaginar) el conjunto de sub-opciones</strong> que abarca cada opción de menú. Si busco un cepillo de dientes eléctrico y estoy en el nivel 1, dónde clickeo, ¿en higiene personal o en pequeños electrodomésticos?</li>
<li style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px"><strong>Es muy malo para la navegación exploratoria</strong>, donde no tengo una idea clara de lo que busco sino que al revés, quiero ver para decidir. </li>
<li style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px"><strong>Es muy difícil recuperarse de un error</strong> en etapas anteriores, porque es muy difícil recordar las opciones que no elegí. Ahora estoy en el nivel 3 y para entender que me equivoqué tengo que recordar las opciones disponibles en el nivel 1. </li>
<li style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px"><strong>No permite promover contenido</strong>, es decir, hacer accesible rápidamente el contenido o la opción más probable. Si esa opción está en un nivel 4, habrá que pasar obligatoriamente por los 3 niveles superiores para acceder a ella, y hacerlo sin errar el camino. </li>
</ul>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">El cajero automático es un ejemplo de una idea perimida en un envase moderno. Mirando la imagen surge inmediatamente la pregunta ¿qué hay dentro de “Más Servicios”?. Parece obvio que Cambio de Pin no es una operación muy frecuente, pero esconderla dentro de Más Servicios hace que muchas personas no la encuentren y por lo tanto ocupa un lugar en el nivel 1. Incluir un importe de retiro como opción de nivel uno parece también un paliativo para dificultades en la interacción. Si a eso se le suma la odiosa costumbre del cajero automático de dejar a los usuarios llegar al final de la transacción para recién allí avisarles que hubo un error o que no hay dinero disponible, se explica claramente por qué la gente nunca les tomó cariño (y muchos los detestan lisa y llanamente).</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">Filtrar</h2>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Filtrar es de alguna manera volver a poner el árbol en la posición correcta: siempre muestro contenido primero y le permito al usuario ir reduciendo el conjunto de opciones hasta llegar a la hoja del árbol que busca. Si se lo mira con atención, detrás de las apariencias, los filtros y los menús son dos versiones de la misma idea, solo que filtrar resuelve las limitaciones de la navegación a través de menús sin perder potencia. </p>
<p><img src="https://concreta.uy/wp-content/uploads/pgina-de-productos-de-Mercado-Libre600.png" alt="página de productos de mercado libre" 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">Mercado Libre muestra rápidamente una lista de opciones y permite reducirla a través de una batería de filtros</p>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Mostrar del arranque documentos u opciones (hojas) permite dar a la interfaz una flexibilidad enorme, porque pone a disposición tanto del diseñador como del equipo de contenidos el manejo dinámico de las prioridades y las probabilidades, la materia prima de la capacidad de adaptar la interfaz al contexto, al momento y al usuario.</p>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Los Menús y los filtros no necesariamente son mutuamente excluyentes. Mercado Libre, que tiene una implementación solvente y sofisticada de filtros tiene uno o dos niveles de menú antes de llegar a la página de productos. </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">Búsqueda avanzada, la versión maldita de los filtros</h2>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Una cosa es el análisis teórico de los filtros como herramienta de navegación y otra la implementación. En universos extensos de información definir qué y cómo filtrar, dar lugar a prioridades, así como entender las formas de organizar y desplegar la información son todas tareas exigentes. </p>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Una versión distorsionada de los filtros, basada en la idea errónea de que el usuario sabe exactamente lo que quiere, es la búsqueda avanzada. </p>
<p><img src="https://concreta.uy/wp-content/uploads/formulario-complejo-de-busqueda600.png" alt="formulario de búsqueda avanzada" 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 búsqueda avanzada es la versión maldita de un sistema de filtrado</p>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">La búsqueda avanzada muestra el árbol pero sin las hojas. Muestra las posibles bifurcaciones de cada uno de los nodos, pero con el requerimiento de imaginar las consecuencias de las decisiones. Clickea el botón reset y <strong>vuelve todo el problema al nivel Pienso y Entiendo. Y esa nunca es una gran apuesta</strong>.</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">
<br>
<p>___</p>
<p style="font-size: 16px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Te invitamos a la charla de Manuel Razzari sobre Mitos de la Accesibilidad, este 30 de setiembre a las 19 hs. de Montevideo y Buenos Aires, 18 hs. de Santiago y 17 hs. de Bogotá y Ciudad de México.</p>
<h2><a href="https://concreta.uy/charla-mitos-de-la-accesibilidad/?utm_source=elastic&utm_medium=mailing&utm_campaign=TIDI20210907&utm_content=De cómo Mercado Libre derrotó al cajero automático">Inscripción gratuita</a></h2>
<p><a href="https://concreta.uy/charla-mitos-de-la-accesibilidad/?utm_source=elastic&utm_medium=mailing&utm_campaign=TIDI20210907&utm_content=De cómo Mercado Libre derrotó al cajero automático"><img alt="Charla de Manuel Razzari: Mitos de la Accesibilidad" src="http://concreta.com.uy/wp-content/uploads/charla-de-Manuel-Razzari-Mitos-de-la-Accesibilidad600.png" style="width: 600px; height: 323px;" /></a></p>
</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=NqHgUOp43jDybPpR5zsF1rz03-x7EsgkU-j_IEOoiNOjB8AisqIkH74GXSLabNRIcykSwTw89zmgXN1PBevjy_eMGlaUuVwn2UBt_b_IsRmdZayYuTfTbUl85X0D-rixJWfbMSmy8VY0imdac4hR0k8yW71fBT-TWOBTbUBJmeazJDFT7U2Y6SvI5TjPUObm8UR_IVNmIqhnO8V5tRqcQfXOCvezwg1ol6c7SBCSfeP2EDBTzkrsjLtvDMMsoT1jkd1UvzlGIf81_c6L_dyWOHAvVeIvjaZDN_NdHBBgtP893Wp9pP1hxd-ghvnaAzkCMYiC1Ommd0M-wLOAqVJUmHORFXmDRHxRWEobl0R_ZcVywZ3LbEXLpuF6dK2GY9_cIA2" style="color:#666666;">No quiero recibir información sobre cursos de Concreta<br />
<img alt="" src="https://www.google-analytics.com/collect?v=1&tid=UA-88473526-1&cid=698082699.1431688889&t=event&ec=ElasticEmail&ea=De+c%C3%B3mo+Mercado+Libre+derrot%C3%B3+al+cajero+autom%C3%A1tico&el=698082699.1434050727&cs=newsletter&cm=email&cn=062413&cm1=1" style="width: 1px; height: 1px;" /></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>