Campo de búsqueda para blog de minimalRC

Según el consejo #11 de 101 UX Principles, todo campo de búsqueda debe tener un botón que diga “Buscar” o un ícono de una lupa.

Como pretendo que el desempeño de minimalRC sea mejor, y realmente no me gustan muchos los íconos, la opción de cargar todo FontAwesome por una lupa no es opción.

Así que mi campo de texto se transformará de ésto:

Ver imagen…

Imagen previa de control para buscar.
Figura 1. Imagen previa de control para buscar.

A ésto:

Ver imagen…

Nuevo campo de búsqueda del blog.
Figura 2. Nuevo campo de búsqueda del blog.

Hablando en términos de código de Bulma, hacemos uso de los addons.

El código del control mostrado en la figura 1 es el input que utilizaremos como base:

<form action="http://www.google.com/search" method="get" onSubmit="Gsitesearch(this)">
    <div class="field">
        <div class="control">
            <input name="q" type="hidden" />
            <input id="search-archive" name="qfront" class="input" type="text" placeholder="[Ctrl + Shift + F] para buscar...">
        </div>
    </div>
</form>

Para lograr lo que requiero para aumentar la usabilidad se tiene que agregar lo siguiente:

  • la clase .has-addons al contenedor .field, para indicar que es un input con un botón,
  • la clase .is-expanded al contenedor .control, para hacerlo de tamaño completo, y
  • agregar el código del botón.

Todos esos cambios se reflejan en las líneas subrayadas en el siguiente código:

<form action="http://www.google.com/search" method="get" onSubmit="Gsitesearch(this)">
    <div class="field has-addons">
        <div class="control is-expanded">
            <input name="q" type="hidden" />
            <input id="search-archive" name="qfront" class="input" type="text" placeholder="Presiona [Ctrl + Shift + F] para escribir aquí">
        </div>
        <div class="control">
            <button class="button is-info">Buscar...</button>
        </div>
    </div>
</form>

Por cierto, la leyenda de “Búscar…” se debe al tip #6, que dice que se deben usar elipsis, o algún indicador, para indicarle al usuario que hay más pasos.

En este caso, pretendo que sea una advertencia que dice “Oh, por cierto, te llevaré a una página de Google que muestra los resultados”.

Otro pequeño cambio de usabilidad fue cambiar el texto predeterminado, de “[Ctrl + Shift + F] para buscar…” a “Presiona [Ctrl + Shift + F] para escribir aquí”.

¿Por qué?

Porque el presionar las teclas no te lleva a la búsqueda o resultados inmediatamente, por lo tanto no se ejecuta otro paso (por eso no hay elipsis). Por otro lado, el presionar las teclas sí te lleva a esa caja de texto y te permite escribir allí.

Con esto damos seguimiento a otras recomendaciones más de 101 UX Principles.



Publicado: 2020-11-10





¿Tienes algún comentario?

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *