La máquina que nadie entiende
Estás en la estación y quieres comprar un billete. La máquina tiene doce botones y ninguno dice "billete".
Detrás hay una cola. Aprietas uno al azar y sale algo que no querías.
No fallas tú: falla el diseño. Hoy aprendes a hacer que una página sea fácil de usar.
Palabras clave
| Palabra | Qué significa | Ejemplo |
|---|---|---|
| Usabilidad | Lo fácil, rápido y agradable que es usar algo. | |
| Menú | La lista de enlaces para moverse por la página. | |
| Botón | Un elemento que se pulsa para hacer algo. | <button> |
| Mensaje de error | La frase que dice que algo ha salido mal. | |
| Pista | Una ayuda corta antes de escribir, como el formato de una fecha. | |
| Coherencia | Que las cosas parecidas se vean y funcionen igual. |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Cinco ideas que lo resumen
Claro: se entiende sin leer un manual.
Coherente: el menú está siempre en el mismo sitio y los botones se parecen.
Con respuesta: al pulsar, ocurre algo visible.
Con ayuda: hay pistas antes y buenos mensajes después.
Perdona: si te equivocas, puedes volver atrás.
Pruébalo: pista, error y botones
<h1>Reserva de mesa</h1>
<form class="booking">
<label for="people">Número de personas</label>
<input id="people" type="number" min="1" max="8" value="2">
<p class="hint">De 1 a 8 personas.</p>
<p class="error">Para más de 8 personas, llama al bar.</p>
<button class="primary" type="button">Reservar</button>
<button class="secondary" type="button">Cancelar</button>
</form>
Mensajes de error: malo y bueno
| Mensaje malo | Mensaje bueno |
|---|---|
| Error 5 | No hemos podido guardar tu reserva. Prueba otra vez. |
| Dato no válido | El teléfono tiene que tener 9 cifras. |
| ¡Fallo! | Falta el nombre. Escríbelo para continuar. |
| Acceso denegado | La contraseña no es correcta. Puedes cambiarla aquí. |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Repaso rápido: mensajes
Inténtalo
Repaso rápido: mensajes
3 preguntasTus respuestas se corrigen aquí y no se guardan. Una cuenta guarda tus resultados.
Botones que se ven y se pulsan
Un botón debe parecer un botón: con relleno, borde y un texto que diga lo que hace.
Mejor "Reservar mesa" que "Enviar". Y deja uno solo como principal, con color fuerte.
En el móvil se pulsa con el dedo. Dale al botón al menos 44 píxeles de alto.
Menús que no pierden a nadie
Pon siete enlaces como máximo. Más de siete cuesta elegir.
Usa palabras que la gente entienda: "Carta", no "Productos gastronómicos".
Pon el menú en el mismo sitio en todas las páginas, y marca la página donde estás.