<!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=7915bf47ffd8047a277a47db6e2f0b68" /><a href="http://concreta.uy/cursos-en-linea/?utm_source=elastic&utm_medium=mailing&utm_campaign=PSUX20210120&utm_content=Sobre filtros y filtrado (segunda parte)" style="color: #2BA6CB;"> </a></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td align="center" style="padding:10px;" width="600">Teoría y aplicación práctica de la Accesiblidad, basado en WCAG 2.1<br />
<strong><a href="https://concreta.uy/curso-accesibilidad-herramientas-de-evaluacion-wcag-2-2/?utm_source=elastic&utm_medium=mailing&utm_campaign=ACEV20211027&utm_content=Sobre filtros y filtrado (segunda parte)">Curso de Accesibilidad: Herramientas de evaluación WCAG 2.1</a></strong><br />
Próximo comienzo: <strong>27 de octubre </strong>- <span style="font-size: 16px; margin-top: 24px"><a href="https://concreta.uy/curso-accesibilidad-herramientas-de-evaluacion-wcag-2-2/?utm_source=elastic&utm_medium=mailing&utm_campaign=ACEV20211027&utm_content=Sobre filtros y filtrado (segunda parte)#wpcf7-f1248-p4164-o1">Hablá con un docente</a></span></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">Sobre Filtros y Filtrado (segunda parte)</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">En la <a href="https://concreta.uy/biblioteca/sobre-filtros-y-filtrado/?utm_source=elastic&utm_medium=mailing&utm_campaign=ACEV20211027&utm_content=Sobre filtros y filtrado (segunda parte)">parte I</a> expusimos las bases sobre las que se apoya un buen sistema de filtrado. Abordamos en esta nota un conjunto de ideas complementarias sobre cómo crear filtros.</p>
<p><a href="https://concreta.uy/biblioteca/sobre-filtros-y-filtrado-ii/?utm_source=elastic&utm_medium=mailing&utm_campaign=ACEV20211027&utm_content=Sobre filtros y filtrado (segunda parte)"><img src="https://concreta.uy/wp-content/uploads/Filtros-en-movil600.png" alt="Filtros en un dispositivo móvil" 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">Sumado a los 4 principios fundamentales expuestos en la <a href="https://concreta.uy/biblioteca/sobre-filtros-y-filtrado/?utm_source=elastic&utm_medium=mailing&utm_campaign=ACEV20211027&utm_content=Sobre filtros y filtrado (segunda parte)">primera parte de esta nota</a> hay un conjunto de consideraciones relevantes a la hora de concebir y diseñar un buen sistema de filtrado.</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">Móvil</h2>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Lo que en el escritorio es complicado, en el móvil lo es el triple, porque no hay espacio para mostrar a la vez los ítems a filtrar y los filtros. Algunas recomendaciones al respecto: </p>
<ul>
<li style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Cuando los filtros se activan, utilizar toda la pantalla o al menos toda la que sea necesaria. Mantener una franja de los ítems que están debajo solo empobrece la interacción sin sumar información relevante. </li>
<li style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Cuando hay filtros aplicados, mostrarlos aunque sea utilizando un espacio mínimo. Si son muchos, mostrar dos o tres y sugerir visualmente que hay más. </li>
<li style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Cuidar el doble el tiempo de respuesta, dado que los filtros muchas veces disparan consultas que pueden demorar, tener en cuenta que en el móvil todo siempre es más lento. Considerar especialmente para el móvil si actualizar a cada click o junto al final con un botón tipo “filtrar”. </li>
</ul>
<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">Ordenar</h2>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Buscar y filtrar pueden ser concebidos como formas específicas de ordenar, con una diferencia sutil pero relevante: mientras que en la búsqueda y en el filtro el modelo mental es “está en el resultado” o “no está en el resultado”, ordenar se asocia con una prioridad en la lista para cada elemento. </p>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">En la práctica Google, el omnipresente buscador de nuestro planeta, es en realidad un ordenador: devuelve los primero resultados (hasta un máximo de 40.000) que coinciden con la clave, ordenados por la probabilidad de ser útiles. </p>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Tenemos que tener presente siempre que el orden es más útil que el filtrado de tipo incluido/excluido y considerar para todos los casos una forma lo más útil posible de ordenar los ítems que fueron incluidos. </p>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Inclusive si definimos que no hay un orden porque no tenemos forma de aportar valor al ordenar, deberíamos garantizar que el mismo filtro arroje siempre el mismo orden. </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">Interactivo o botón</h2>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Al implementar un sistema de filtrado siempre surge la disyuntiva entre la opción de aplicar cada filtro al seleccionarlo o agregar un botón “filtrar” o similar y aplicarlos todos juntos. </p>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Parece obvio que si el sistema responde de forma instantánea la primera opción es mejor, porque al final es idéntica a la primera con un click menos y permite ver en tiempo real la evolución. Pero los sistemas no responden de forma instantánea, de hecho muchas veces no responden de forma siquiera satisfactoria. </p>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Por lo tanto, si la respuesta a la aplicación de un filtro está por debajo de los 2 segundos, siempre por debajo de los 2 segundos, no hay problema en aplicarlos interactivamente. No son 2 segundos en el notebook de última generación conectado por fibra óptica al servidor, sino 2 segundos entregados de forma consistente a prácticamente la totalidad de los escenarios de uso.</p>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Si el tiempo de respuesta está por encima de 2 segundos, hay que pensar bien, porque una demora atrás de la otra produce una calidad de interacción pésima y lo que iba a ser mejor se transforma en algo mucho peor. </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">Selección múltiple</h2>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Muchos sistemas de filtros cometen el error de asumir que el usuario sabe exáctamente lo que busca: un sedan 4 puertas de 2018 con entre 50.000 y 60.000 km con un precio entre 9.500 y 10.000 dólares. Para un usuario que sabe exactamente lo que busca un sistema de filtros con opciones exactas es lo mejor. </p>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Pero a los usuarios les da lo mismo si es sedan o hatch. Muchas veces tienen disyuntivas como un sedan más nuevo o un SUV más completo pero algo más viejo y consideraciones en las que buscan comparar y valorar alternativas distintas. ¿Cambiamos el auto o nos vamos de viaje?</p>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Los buenos sistemas de filtros deben permitir la búsqueda exploratoria y uno de los atributos principales para ello es permitir selección múltiple: más de una variante para cada opción. </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">Resultados Vacíos</h2>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Es razonable asumir que un sistema de filtrado produce resultados vacíos. Pero si el universo de información sobre el que se filtra es pequeño, la probabilidad de arrojar resultados vacíos es muy alta. </p>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">La mejor solución a este problema va en linea con la <a href="https://concreta.uy/biblioteca/prevenir-los-errores-heuristica-5/?utm_source=elastic&utm_medium=mailing&utm_campaign=ACEV20211027&utm_content=Sobre filtros y filtrado (segunda parte)">Heurística 5</a>, prevenir el error haciendo que al seleccionar una opción se deshabiliten dinámicamente las que no van a arrojar resultados. Y mucho mejor si explican visualmente por qué están deshabilitadas. </p>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Pero deshabilitar las opciones dinámicamente no siempre es posible: no se puede por ejemplo si se filtra con un botón “filtrar”. En estos casos es importante buscar alternativas que reemplacen la pantalla vacía. Por ejemplo, debajo del mensaje de que no se encontraron filtros, mostrar resultados de la misma consulta con un filtro menos o mostrar sugerencias de combinaciones de filtrado similares que sí producen resultados. En general, tratar la pantalla de resultados vacíos como un momento en el que defraudamos al usuario y esforzarse por hacer algo que lo compense.</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"><a href="https://concreta.uy/biblioteca/sobre-filtros-y-filtrado-ii/?utm_source=elastic&utm_medium=mailing&utm_campaign=ACEV20211027&utm_content=Sobre filtros y filtrado (segunda parte)#galeria">Ver la galería de ejemplos de filtros en sitos de automotores</a></h2>
</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;"><small><strong><span style="background: #FFA500; padding: 5px 10px;">Nuevo!!!</span></strong></small>
<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/curso-accesibilidad-herramientas-de-evaluacion-wcag-2-2/?utm_source=elastic&utm_medium=mailing&utm_campaign=ACEV20211027&utm_content=Sobre filtros y filtrado (segunda parte)">Curso de accesibilidad: Herramientas de evaluación WCAG 2.1</a></h3>
<p style="margin-bottom: 8px;font-weight: normal;font-size: 18px;line-height: 1.6;">Un curso que te permitirá comprender qué es la Accesibilidad, conocer las <a href="https://www.w3.org/TR/WCAG22/">WCAG 2.1, publicadas por la W3C</a> que son el estándar internacional de accesibilidad y conocer herramientas para aplicarlas y evaluarlas.</p>
<p style="margin-bottom: 20px;font-weight: normal;font-size: 18px;line-height: 1.6;">Próximo comienzo <strong>27 de octubre </strong>- Cupos limitados</p>
<p style="margin-bottom: 20px;font-weight: normal;font-size: 18px;line-height: 1.6;">(Ahora pagos en pesos argentinos para Argentina)</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/curso-accesibilidad-herramientas-de-evaluacion-wcag-2-2/?utm_source=elastic&utm_medium=mailing&utm_campaign=ACEV20211027&utm_content=Sobre filtros y filtrado (segunda parte)" 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;">Ver programa y detalles </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=uSqUTx9n4N743ViptdRDE6VUsZyPTjcMZz3usw7-JERRsIkdyIhcevVA2BtMwWuWkDgpL7z-Qf-8kBV3EBxmJR4zEf74Pl2fhTrd7LbDHKeCGWeNjs9P17uVj1yrh10F9xaYPbVKk6sKZScdrkZpel5MBL8uK_i6_lgmdcs19Cx7ZCKXii8rG8wRbqVgHOasJSSiRcQKaZ92BQWuKYclXDhAUZpTIAJqGrgsCcwXiSyChv8I7RB19yU2DXpoQi086K-Cvk4-iiQlBpQvvfsBuZ54DNvz1cyJnlW35-KJwC4BHXzihqtAzbSUpKYQxFTjI_wtBpdWpYXWBTWjqu_w6oaI9RYhj-P2QOjEylxwu1d6Qnr5YeUcowKtBW_O82MnPO2YMIOyxEc8K2Qh5uNd45Q1" 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.1438600084&t=event&ec=ElasticEmail&ea=Sobre+filtros+y+filtrado+%28segunda+parte%29&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>