≡En resumen
- Un buen ejemplo de interfaz se explica por lo que permite hacer al usuario, no por lo bonito que es.
- En formularios, las etiquetas visibles y los errores concretos marcan la mayor diferencia.
- Ocultar la navegación tras un icono reduce su uso y hace más lentas las tareas.
- Los estados vacíos, los errores y las cargas también son interfaz, y suelen ser lo peor diseñado.
- Para evaluar un ejemplo, pregúntate qué tarea resuelve, qué le cuesta al usuario y cómo se recupera de un error.
01 ¿Qué son los ejemplos de interfaz de usuario?
En esta página describimos los patrones en lugar de reproducir capturas de productos concretos: lo que importa es entender el mecanismo para aplicarlo en tu caso. Si buscas inspiración visual de webs completas, tienes ejemplos de páginas web de empresa comentados en nuestra guía.
02 Ejemplos de interfaces de usuario en el día a día
| Interfaz | Tipo | Qué la hace buena |
|---|---|---|
| Cajero automático | Táctil o de botones, en público | Pocos pasos, textos grandes, confirmación antes de cada operación |
| App bancaria | Gráfica y táctil | Saldo visible al abrir, acciones frecuentes a un toque, confirmaciones claras |
| Proceso de compra de un ecommerce | Web | Pocos campos, costes visibles antes de pagar, pago como invitado |
| Panel de un software SaaS | Web de escritorio | Navegación visible, filtros persistentes, estados vacíos que enseñan a empezar |
| Terminal de un sistema | Línea de comandos | Ayuda integrada, autocompletado, mensajes de error que dicen cómo corregir |
| Asistente de voz | Voz | Confirma lo que ha entendido y sugiere lo que puedes pedir |
Todas cumplen lo mismo: el usuario sabe qué puede hacer, qué está pasando y cómo volver atrás. Es lo que se entiende por usabilidad, y se aplica igual a una pantalla que a una conversación.
03 Ejemplos de formularios: bien y mal
| Elemento | Mal ejemplo | Buen ejemplo | Por qué |
|---|---|---|---|
| Etiqueta del campo | Solo texto de ejemplo dentro del campo, que desaparece al escribir | Etiqueta visible encima del campo | El texto de ejemplo se borra al escribir, no todos los lectores de pantalla lo leen y suele tener poco contraste |
| Mensaje de error | «Campo obligatorio» o «Fecha no válida» | «Introduce tu nombre» o «Introduce una fecha posterior al 31/08/2026» | Dice qué pasa y cómo corregirlo, en lenguaje llano |
| Tras un error | El formulario se vacía | Se conservan todas las respuestas | Obligar a repetir lo ya escrito provoca abandonos |
| Ancho del campo | Todos los campos igual de anchos | Código postal corto, dirección larga | El ancho sugiere cuánto hay que escribir |
| Autocompletado | El navegador no sabe qué va en cada campo | Atributo autocomplete en nombre, email, dirección y teléfono | Rellena en segundos y cumple el criterio 1.3.5 de las WCAG |
Un formulario de contacto pide nombre, email, teléfono, empresa, cargo, presupuesto y mensaje, todo obligatorio. Mejora posible: quitar cargo y empresa (se pueden preguntar después), hacer el teléfono opcional, cambiar «Enviar» por «Pedir presupuesto» y mostrar debajo del botón en cuánto tiempo se responde. Menos campos y un botón que dice lo que ocurre reducen la fricción.
04 Ejemplos de navegación: visible frente a oculta
27 % vs 48-50 %
Uso de la navegación en escritorio: oculta frente a visible o combinada
Fuente: Nielsen Norman Group, 2016
57 % vs 86 %
Uso de la navegación en móvil: oculta frente a combinada
Fuente: Nielsen Norman Group, 2016
39 %
Tareas al menos un 39 % más lentas en escritorio con navegación oculta
Fuente: Nielsen Norman Group, 2016
| Situación | Mal ejemplo | Buen ejemplo |
|---|---|---|
| Web de escritorio con 5-7 secciones | Menú de hamburguesa aunque sobra espacio | Menú horizontal visible con las secciones principales |
| App móvil con 3-5 destinos | Todo escondido en un menú lateral | Barra inferior con iconos y texto |
| Icono de menú | Pequeño, sin texto y pegado al logo | Con la palabra «Menú» y separado del logotipo |
| Tienda con muchas categorías | Menú desplegable de cuatro niveles | Categorías principales visibles, buscador destacado y migas de pan |
| Página actual | Ninguna marca de dónde estás | Elemento activo resaltado en el menú |
Los datos proceden de la investigación en la que Kara Pernice y Raluca Budiu compararon navegación oculta, visible y combinada. La conclusión práctica: esconde en el menú solo lo secundario y, si usas el icono de hamburguesa, acompáñalo de texto. Para comprobar cómo navegan tus usuarios reales, los mapas de calor web muestran dónde hacen clic y dónde no.
05 Ejemplos de estados vacíos
Un estado vacío es lo que ve el usuario cuando todavía no hay datos: una bandeja sin mensajes, una lista de favoritos sin elementos, una búsqueda sin resultados. Nielsen Norman Group propone tres pautas: comunicar el estado del sistema, aprovechar para enseñar y ofrecer un camino directo a la tarea principal.
| Caso | Mal ejemplo | Buen ejemplo |
|---|---|---|
| Lista de favoritos | Pantalla en blanco | «Toca el corazón de un producto para guardarlo aquí», con botón para ver novedades |
| Búsqueda sin resultados | «0 resultados» | «No hay resultados para “zapatilas trail”. ¿Querías decir “zapatillas trail”?», con categorías sugeridas |
| Panel de informes nuevo | Gráficos vacíos con ejes a cero | Explicación de qué aparecerá, botón para conectar datos y opción de ver datos de ejemplo |
| Filtro demasiado restrictivo | Lista vacía sin explicación | «No hay pedidos entre esas fechas», con botón para ampliar el rango |
06 Ejemplos de mensajes, confirmaciones y botones
Error del sistema
Mal: «Error 500». Bien: «No hemos podido guardar los cambios. Tu texto sigue aquí; inténtalo de nuevo en unos segundos».
Acción destructiva
Mal: «¿Seguro? Aceptar / Cancelar». Bien: «¿Eliminar el proyecto “Web 2026” y sus 48 archivos? Eliminar proyecto / Conservar».
Deshacer
Mejor que preguntar siempre: archivar un email al instante y mostrar «Archivado. Deshacer» durante unos segundos.
Texto del botón
Mal: «Enviar» o «Aceptar». Bien: un verbo con objeto que diga lo que ocurre, como «Descargar factura» o «Reservar cita».
Jerarquía
Un solo botón principal por pantalla; el resto, secundarios. Dos botones iguales obligan a pensar.
Tamaño de toque
Apple recomienda 44 × 44 puntos por defecto en iOS y Android pide al menos 48 × 48 dp; los botones diminutos provocan toques erróneos.
07 Cómo analizar un ejemplo de interfaz
-
1
Define la tarea
Qué intenta conseguir el usuario en esa pantalla, en una frase.
-
2
Cuenta el esfuerzo
Pasos, campos, decisiones y lecturas necesarios para completarla.
-
3
Provoca errores
Deja campos vacíos, escribe mal, pierde la conexión: mira cómo responde.
-
4
Prueba sin ratón
Recorre la pantalla solo con el teclado y con el zoom al 200 %.
-
5
Contrasta con usuarios
Tu opinión no basta: observar a cinco personas usando la pantalla descubre los problemas más graves.
Antes de rediseñar nada, valida tus hipótesis con un test de usabilidad: ver a usuarios reales atascarse convence más que cualquier ejemplo. Si al aplicar estos ejemplos a tu web encuentras más problemas de los que puedes resolver, un equipo de diseño UX para ecommerce y productos digitales puede auditarla y priorizar los cambios, y un buen diseño de páginas web profesionales los incorpora desde el principio.
Preguntas frecuentes sobre User interface examples
Es un caso concreto de cómo una pantalla, un menú, un formulario o un asistente permite al usuario hacer una tarea, que se analiza para aprender de sus aciertos y errores.
El escritorio de un ordenador, la pantalla de un móvil, un cajero automático, el proceso de compra de una tienda online, un panel de control de un software o un asistente de voz.
Que el usuario entienda qué puede hacer, sepa qué está pasando, complete la tarea con poco esfuerzo y se recupere fácilmente de los errores.
No siempre, pero reduce el uso de la navegación: en el estudio de Nielsen Norman Group de 2016, la navegación oculta se usó mucho menos que la visible. Úsalo para lo secundario y acompáñalo de texto.
Diciendo qué ha pasado y cómo solucionarlo, en lenguaje llano y junto al campo afectado, por ejemplo «Introduce tu nombre» en lugar de «Campo obligatorio».
En sistemas de diseño públicos como GOV.UK Design System, en las guías de Apple y Google y en la investigación publicada por Nielsen Norman Group.
Fuentes consultadas
Sobre el autor
Equipo editorial de appyweb
Marketing, SEO y desarrollo con IA
Especialistas de appyweb en SEO, publicidad, desarrollo web y automatización con IA.