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…

A ésto:

Ver imagen…

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.