confección de INTERFACES GRÁFICAS
INTRODUCIÓN
Introducción
Una interfaz gráfica un espacio visual que permite a los usuarios interactuar con dispositivos y software a través de elementos visuales, llamados componentes o controles (en lugar de comandos de texto), como por ejemplo botones, iconos, formularios, textos, etc. Esta interacción debe ser intuitiva y accesible, con el objetivo de simplificar y facilitar la experiencia entre el usuario y el sistema, conviritíendola en amigable y eficiente.
Las cualidades clave que definen a una buena interfaz gráfica son: - Visual y táctil (si se trata de pantallas táctiles). - Emplea metáforas visuales reconocibles, como carpetas, botones.... - Responde a las acciones del usuario (clics, toques, gestos), es interactiva. - Es multiplataforma.
Introducción
Un diseñador de interfaces gráficas se encarga de crear esos espacios visuales, consiguiendo que la experiencia con el usuario sea eficiente, atractiva, fácil de entender y accesible.
Las principales funciones de un diseñador de interfaces son: - Investigar las necesidades y comportamientos de los usuarios. - Diseñar estructuras, componentes y flujos de navegación. - Utilizar los colores, las tipografías, los iconos y los estilos para comunicar la identidad del producto y garantizar la usabilidad.
- Colaborar con el resto de desarrolladores para implementar la interfaz correctamente. - Elaborar prototipos, wireframes y mockups para mostrar la interfaz antes de desarrollarla. - Realizar pruebas y mejoras continuas.
USABILIDAD
experiencia de usuario (ux)
En la creación de aplicaciones multiplataforma, el diseño de la interfaz es fundamental para que el usuario se sienta cómodo y no acabe abandonándo la aplicación. Ahí es donde aparece la Usabilidad, que estudia la forma de diseñar aplicaciones para que los usuarios puedan interactuar con ellos de la forma más fácil, cómoda e intuitiva, de manera satisfactoria y eficiente.
Escribe un subtítulo genial aquí
Principios básicos de usabilidad son: - Facilidad de aprendizaje y memorabilidad: Los usuarios nuevos deben poder entender rápidamente cómo usar la interfaz y recordar su funcionamiento. - Eficiencia de uso: Los usuarios deben poder realizar sus tareas de forma rápida y sin obstáculos. - Tasa de errores baja: se deben minimizar los errores del usuario y permitir su recuperación fácil.
- Satisfacción: La experiencia debe ser agradable y cumplir con las expectativas.
La Usabilidad es parte de la experiencia de usuario (UX), pero no son lo mismo. La usabilidad se centra en cómo de fácil y eficiente es usar un producto. La experiencia de usuario es un concepto más amplio que, además de la usabilidad, incluye la percepción y las emociones del usuario antes, durante y después de usar un producto, trata más profundamente la estética y el diseño emocional.
Escribe un subtítulo genial aquí
Imagina que necesitas sacar dinero: La Interfaz de Usuario (UI): Es lo que ves y tocas: la pantalla táctil, los botones, la ranura para la tarjeta y el dinero, los gráficos, el tipo de letra. La Usabilidad: Es si puedes usar ese cajero sin frustración. ¿Encuentras rápidamente la opción de "sacar dinero"?, ¿Es obvio qué botón pulsar?, ¿Te da mensajes claros si hay un error? Si el proceso es rápido y sin errores, el cajero es usable. La Experiencia de Usuario (UX): Esto es todo lo anterior y más. No es solo si pudiste sacar el dinero, sino cómo te sentiste al hacerlo. ¿Te pareció seguro?, ¿La pantalla era legible bajo el sol?, ¿Te ofreció opciones relevantes?, ¿Tuviste que esperar mucho? ¿Te dio un recibo claro? .
Un buen diseño de interfaces hace el cajero bonito y comprensible. Una buena usabilidad hace que puedas sacar dinero fácil y rápido. Una buena UX hace que te sientas satisfecho y seguro usando ese banco.
Existen las 10 reglas heurísticas de Jakob Nielsen que sirven de guía universal para diseñar, evaluar y mejorar la usabilidad de cualquier interfaz digital. Son las siguientes:
1.- Visibilidad del estado del sistema. Nada genera más ansiedad que un botón que no responde y nos genera la duda de si ¿Esto sigue vivo? ¿Está funcionando? ¿Se ha “colgado”?. El sistema debe mantener a los usuarios informados sobre lo que está sucediendo, a través de feedback apropiado y en un tiempo razonable. Buenas tácticas: Feedback inmediato: animaciones al hacer clic (ej: botón que se "hunde"), avisos claros cuando se añaden artículos al carrito. Indicadores claros de carga, como spinners o barras de progreso. Indicadores de éxito o error , como "tu pedido se guardó correctamente".
Escribe un subtítulo genial aquí
Ejemplo
2 -Relación entre el sistema y el mundo real. Se deben utilizar palabras, frases y elementos visuales familiares para el usuario. Ejemplos claros serían el botón de «buscar» representado con una «lupa» o el icono e papelera como símbolor de borrar.
Escribe un subtítulo genial aquí
Acceder a la web de salequesis.es e intentad comprar una entrada para cualquier evento disponible (no es necesario completar la compra). ¿Cómo podríais renombrar o reordenar esa parte de la interfaz para "hablar el lenguaje del usuario" y cumplir con la regla de relación entre el sistema y el mundo real?
3 -Control y libertad del usuario. A veces, un usuario se equivoca, es normal, y cuando eso ocurre, debemos darle la posibilidad de subsanar el error y no sentirse frustrado por no poder realizar algo. Siempre debe haber una "salida de emergencia". El usuario debe poder navegar libremente, con libertad para deshacer, explorar o interrumpir y debe ser capaz de encontrar fácilmente salidas y rutas alternativas. La implementación de esta regla por excelencia es la famosa función de deshacer en aplicaciones de procesamiento de texto o diseño gráfico, o salidas obvias como el botón "cancelar" o "volver atrás". Un buen ejemplo es Gmail, que permite recuperar emails borrados dentro de 30 segundos.
Escribe un subtítulo genial aquí
Otro ejemplo de implementación sería poder personalizar la configuración de privacidad en plataformas de redes sociales, que brinda a los usuarios el control sobre quién puede ver su contenido y cómo se comparte.
4 -Consistencia y estándares. Tenemos que ser coherentes y darle importancia a mantener la misma consistencia a toda la aplicación, es decir, mantener el lenguaje, los colores, la forma de navegación, etc. No deberían hacer que te preguntes si un icono significa lo mismo en distintos sitios. Cambiar las establecidas líneas horizontales o «menú hamburguesa», por una «carita feliz» en la navegación sería desastroso.
Escribe un subtítulo genial aquí
Reglas de oro: -Usar el mismo color para acciones similares (Google usa azul para los enlaces en todos sus productos (Gmail, Drive, etc.).) -Tipografía uniforme: Un solo tipo de fuente para títulos, otro para cuerpo. - Iconos familiares: Usar el mismo ícono de "lupa" para buscar en toda la app.
Un error común es cambiar el lugar del "Carrito" en un e-commerce.
5 - Prevención de errores. Debemos prevenir cualquier error que pueda cometer el usuario y, en caso de que lo cometa, poner a su alcance todas las opciones posibles para poder corregirlo.
Escribe un subtítulo genial aquí
Algunos ejemplos: - Confirmación de dirección de correo electrónico o de la contraseña con doble campo en los formularios. Comprobación de campos de formularios en tiempo real. - Los placeholders en campos de texto, donde aclaran la acción que debemos realizar. - Desactivar botones hasta que se completen campos obligatorios. Un error común se da en los formularios que solo muestran errores después de pulsar el botón de enviar.
6 -Reconocimiento en lugar de recuerdo Las interfaces deben promover el reconocimiento y evitar que los usuarios memoricen sus acciones o elementos al desplazarse por el sistema. Hemos de aliviar la carga cognitiva del usuario. Si un sitio web cambia constantemente la ubicación de los elementos de su menú principal, obligará al usuario a redescubrirlos cada vez que accede a la página. Si el menú principal del sitio web se mantiene en una posición fija y utiliza una estructura consistente, permitirá que el usuario lo encuentre fácilmente sin necesidad de memorizar su ubicación. Ejemplos: Barra de progreso que muestra en que parte de un video o lección de un curso te has quedado. Mostrar información junto a los iconos o cuando se pasa sobre ellos (tooltips). La famosa lista de la compra o "guardar artículos", para evitar que vuelva a buscar el artículo.
Escribe un subtítulo genial aquí
7 - Flexibilidad y eficiencia de uso La aplicación debe estar preparada para todo tipo de usuario, desde los más novatos hasta los más experimentados. Hay que proporcionar a los usuarios opciones de personalización y permitir una interacción rápida y efectiva con la aplicación. Ejemplos: - funciones como los atajos de teclado. - permitir que el sistema se adapte al flujo de trabajo del usuario permitiendo reorganizar u ocultar paneles de aplicación. - personalización de la barra de herramientas en aplicaciones ofimáticas.
Escribe un subtítulo genial aquí
8 -Diseño estético y minimalista Omitir todos aquellos elementos que generen “ruido”, no aporten información y distraigan la atención del usuario. La interface no debe contener información irrelevante o que rara vez se necesite. Se debe conocer qué tipo de contenido necesita el usuario y ocultar todas las funciones complejas que trabajan en segundo plano. Cada elemento extra compite con la información relevante y disminuye su visibilidad.
Escribe un subtítulo genial aquí
Debemos convertir lo complicado en simple, aplicando el término KISS, que significa "Keep It Simple, Stupid!", un principio de diseño muy popular tanto en el desarrollo de software como en otros muchos ámbitos, y es una forma coloquial de decir que las cosas sencillas funcionan mejor.
Ejemplos: La página principal de Apple muestra solo los productos que desean destacar. El buscador de Google solo muestra un campo de texto y un par de botones, no todos sus servicios.
9 - Ayudar a reconocer, diagnosticar y recuperarse de errores: Los mensajes de error deben expresarse en un lenguaje sencillo (sin códigos de error), indicar con precisión el problema y sugerir una solución de manera constructiva.
Escribe un subtítulo genial aquí
Un ejemplo claro son los formularios. Una mala práctica es cuando un usuario comete un error al rellenar sus datos en un formulario online y el sistema no le indica qué campo está incorrecto ni le entrega ninguna guía para corregirlo. Una solución sería resaltar el campo con el error, proporcionar un mensaje explicativo y dar sugerencias al usuario para corregirlo de manera sencilla.
10 -Ayuda y documentación Aunque nuestra web sea muy intuitiva siempre es recomendable tener una guía de como navegar en ella. El sistema deberá ofrecer información relevante al usuario que sea fácil de encontrar y no sea demasiado amplia.
Escribe un subtítulo genial aquí
Ejemplos: Navegación guiada por la web o aplicación, nada más instalarla o abrirla, donde se muestre lo básico y esencial. Sección de FAQs o preguntas frecuentes que podrían hacerse los usuarios. Especificar los requisitos mínimos, si los hay, en los campos de formulario.
Actividad
Escribe un subtítulo genial aquí
Analizar la usabilidad de la interface de Alcampo para compras online (https://www.compraonline.alcampo.es/), sobre todo la pestaña de "contacto".
Usa tres heurísticas de Nielsen para evaluar la navegación. Sugiere :
• Un punto fuerte: algo que realmente funcione y haga la experiencia agradable .
• Un fallo garrafal: un error que grite “¡arregladme!” .
Métricas de usabilidad
Ya sabemos que la usabilidad es importante. Para saber si una interfaz es más o menos usable se utilizan las métricas de usabilidad, que son aquellas características de la interfaz que son medibles de forma objetiva. Estas características o métricas se suelen dividir en tres grupos.
Escribe un subtítulo genial aquí
- Efectividad: Mide el porcentaje de éxito con que los usuarios completan tareas propuestas (si 8 de 10 usuarios logran realizar una acción, la efectividad es del 80%). - Eficiencia: Mide el tiempo y recursos (clics, pasos) que los usuarios necesitan para completar tareas. Cuanto menos tiempo y menos pasos, mayor eficiencia. - Satisfacción del usuario: Se evalúa con escalas y cuestionarios que miden la percepción y opinión del usuario sobre la interfaz.
La norma ISO 9241 , define estos tres pilares (Eficacia, Eficiencia, Satisfacción) que todas las métricas de usabilidad buscan cuantificar.
accesibilidad
La accesibilidad es un componente fundamental de la usabilidad en el diseño de interfaces. Si bien la usabilidad se enfoca en la eficiencia y satisfacción general del usuario, y la accesibilidad en asegurar que todas las personas (incluidas las que tienen discapacidades) puedan usar un producto.
Escribe un subtítulo genial aquí
Existen multitud de elementos a tener en cuenta para hacer una aplicación más accesible. Algunos de los principios más importantes a tener en cuenta para un diseño accesible:
- Contraste adecuado: Colores que permitan distinguir texto y elementos visuales, importante para personas con dificultades visuales. - Navegación clara: Que sea posible navegar usando teclado o lectores de pantalla. - Diseño inclusivo: Evitar depender únicamente del color para transmitir información (ejemplo: rojo para error debe ir acompañado de un icono o texto). - Tamaño de fuente legible: Textos suficientemente grandes y con tipografías claras. - Compatibilidad con tecnologías asistivas: Interfaces que funcionen con lectores de pantalla, ampliadores de pantalla, etc.
Para terminar:
Escribe un subtítulo genial aquí
- Echemos un vistazo al siguiente juego : Can’t Unsee ( https://cantunsee.space/). Servirá para poner a prueba nuestra atención al detalle. Presenta pares de interfaces de diseño y debes escoger el correcto.
- Intentar registraros y no perder la cordura por la web User Inyerface ( https://userinyerface.com/), a ver cuánto tardáis en perder la paciencia. Es una parodia brillante de los errores más garrafales que hay en diseño de interfaces.
¡¡¡ hasta pronto !!!
La página de contacto a la que nos lleva el botón de la página principal es completamente distinta en diseño a la principal, no cumple la heurística de consistencia (menos mal que han dejado el logo....).
Ejemplos a mejorar: - El botón "consultar preguntas frecuentes" no lleva a ningún sitio. Sin embargo, si accedemos a las faq a través del enlace del final de la página principal, sí funciona.
- Junto al botón que pone Archivo (al final del formulario) hay un "No selected file", ¿por qué narices no está en español??? para bien o para mal no todo el mundo sabe inglés. No sería mejor poner en el botón "Adjuntar" y en el texto especificar "adjuntar archivo"? Lo otro parece directamente un error.
Origen del término KISS
El término KISS fue acuñado por el ingeniero aeronáutico Kelly Johnson, quien trabajó en Lockheed Skunk Works, una división de Lockheed Martin responsable de proyectos de desarrollo de aeronaves. Johnson sostenía que los sistemas diseñados deberían ser tan simples que incluso un mecánico de bajo nivel, sin demasiada experiencia, pudiera repararlos bajo condiciones de campo.
En la home de Eroski, por ejemplo, utilizan un icono de una manzana para redirigirnos al “súper online”, una vez estamos en la página del súper, el mismo icono pero con el ancho brevemente alargado, nos dirige a la sección de “productos frescos”.
Podemos ver lo que pasa cuando añadimos un producto al carrito de la compra en dos webs diferentes. En Made.com nos indica con una ventana emergente que hemos añadido el producto, y lo detalla. Si en cualquier momento de la navegación queremos saber qué llevamos seleccionado sin dejar de navegar, pulsamos en la cesta y se abre una ventana con lo que llevamos detallado. En la web de Alcampo (compraonline.alcampo.es) sin embargo, podemos ir añadiendo productos y lo único que cambia es el total de la cesta y el número de productos. Si queremos ver lo que llevamos seleccionado, pulsando nos echará de donde estemos para llevarnos al carrito.
En la web de la sala Equis, al navegar en la taquilla, resulta muy complicado saber dónde hacer clic para comprar una entrada de cine, no tiene un botón comprar como tal, es un campo de tabla entero. Una vez que pulsas, puede que tengas que hacer scroll en el ratón para que salga la opción de comprar, que tampoco es un botón sino una línea entera de lado a lado de la pantalla.Pasa un rato hasta que descubres el camino a seguir (la hora de sesión) y una vez seleccionada la hora y elegido el número de entradas, te aparece el precio. Pero sorpresa, aquí no te aparece la opción de comprar. Tardas un tiempo hasta darte cuenta de que tienes que seleccionar la categoría “Elegir butacas” que está en la parte superior derecha para proseguir con la compra.
Alcampo incorporó una nueva funcionalidad en su web : el apartado de recetas "La Cocina de Alcampo". Es un buscador de recetas por familias de productos (carne, pescado, verduras, etc) y por temporada. Una vez dentro de la receta está lo genial, te permite en un solo botón acceder a todos los ingredientes de la receta para comprarlos online, incluso ofrece varias marcas en algunos ingredientes. Se trata de una funcionalidad creada de un modo muy intuitivo y sencillo, evitas que el usuario busque por toda la web (además incentivas la compra de productos que el cliente no tenía previstos).
DISEÑO INTERFACES
Conchi Iglesias G
Created on October 23, 2025
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Modern Zen Presentation
View
Newspaper Presentation
View
Audio tutorial
View
Pechakucha Presentation
View
Desktop Workspace
View
Decades Presentation
View
Psychology Presentation
Explore all templates
Transcript
confección de INTERFACES GRÁFICAS
INTRODUCIÓN
Introducción
Una interfaz gráfica un espacio visual que permite a los usuarios interactuar con dispositivos y software a través de elementos visuales, llamados componentes o controles (en lugar de comandos de texto), como por ejemplo botones, iconos, formularios, textos, etc. Esta interacción debe ser intuitiva y accesible, con el objetivo de simplificar y facilitar la experiencia entre el usuario y el sistema, conviritíendola en amigable y eficiente.
Las cualidades clave que definen a una buena interfaz gráfica son: - Visual y táctil (si se trata de pantallas táctiles). - Emplea metáforas visuales reconocibles, como carpetas, botones.... - Responde a las acciones del usuario (clics, toques, gestos), es interactiva. - Es multiplataforma.
Introducción
Un diseñador de interfaces gráficas se encarga de crear esos espacios visuales, consiguiendo que la experiencia con el usuario sea eficiente, atractiva, fácil de entender y accesible.
Las principales funciones de un diseñador de interfaces son: - Investigar las necesidades y comportamientos de los usuarios. - Diseñar estructuras, componentes y flujos de navegación. - Utilizar los colores, las tipografías, los iconos y los estilos para comunicar la identidad del producto y garantizar la usabilidad.
- Colaborar con el resto de desarrolladores para implementar la interfaz correctamente. - Elaborar prototipos, wireframes y mockups para mostrar la interfaz antes de desarrollarla. - Realizar pruebas y mejoras continuas.
USABILIDAD
experiencia de usuario (ux)
En la creación de aplicaciones multiplataforma, el diseño de la interfaz es fundamental para que el usuario se sienta cómodo y no acabe abandonándo la aplicación. Ahí es donde aparece la Usabilidad, que estudia la forma de diseñar aplicaciones para que los usuarios puedan interactuar con ellos de la forma más fácil, cómoda e intuitiva, de manera satisfactoria y eficiente.
Escribe un subtítulo genial aquí
Principios básicos de usabilidad son: - Facilidad de aprendizaje y memorabilidad: Los usuarios nuevos deben poder entender rápidamente cómo usar la interfaz y recordar su funcionamiento. - Eficiencia de uso: Los usuarios deben poder realizar sus tareas de forma rápida y sin obstáculos. - Tasa de errores baja: se deben minimizar los errores del usuario y permitir su recuperación fácil. - Satisfacción: La experiencia debe ser agradable y cumplir con las expectativas.
La Usabilidad es parte de la experiencia de usuario (UX), pero no son lo mismo. La usabilidad se centra en cómo de fácil y eficiente es usar un producto. La experiencia de usuario es un concepto más amplio que, además de la usabilidad, incluye la percepción y las emociones del usuario antes, durante y después de usar un producto, trata más profundamente la estética y el diseño emocional.
Escribe un subtítulo genial aquí
Imagina que necesitas sacar dinero: La Interfaz de Usuario (UI): Es lo que ves y tocas: la pantalla táctil, los botones, la ranura para la tarjeta y el dinero, los gráficos, el tipo de letra. La Usabilidad: Es si puedes usar ese cajero sin frustración. ¿Encuentras rápidamente la opción de "sacar dinero"?, ¿Es obvio qué botón pulsar?, ¿Te da mensajes claros si hay un error? Si el proceso es rápido y sin errores, el cajero es usable. La Experiencia de Usuario (UX): Esto es todo lo anterior y más. No es solo si pudiste sacar el dinero, sino cómo te sentiste al hacerlo. ¿Te pareció seguro?, ¿La pantalla era legible bajo el sol?, ¿Te ofreció opciones relevantes?, ¿Tuviste que esperar mucho? ¿Te dio un recibo claro? .
Un buen diseño de interfaces hace el cajero bonito y comprensible. Una buena usabilidad hace que puedas sacar dinero fácil y rápido. Una buena UX hace que te sientas satisfecho y seguro usando ese banco.
Existen las 10 reglas heurísticas de Jakob Nielsen que sirven de guía universal para diseñar, evaluar y mejorar la usabilidad de cualquier interfaz digital. Son las siguientes:
1.- Visibilidad del estado del sistema. Nada genera más ansiedad que un botón que no responde y nos genera la duda de si ¿Esto sigue vivo? ¿Está funcionando? ¿Se ha “colgado”?. El sistema debe mantener a los usuarios informados sobre lo que está sucediendo, a través de feedback apropiado y en un tiempo razonable. Buenas tácticas: Feedback inmediato: animaciones al hacer clic (ej: botón que se "hunde"), avisos claros cuando se añaden artículos al carrito. Indicadores claros de carga, como spinners o barras de progreso. Indicadores de éxito o error , como "tu pedido se guardó correctamente".
Escribe un subtítulo genial aquí
Ejemplo
2 -Relación entre el sistema y el mundo real. Se deben utilizar palabras, frases y elementos visuales familiares para el usuario. Ejemplos claros serían el botón de «buscar» representado con una «lupa» o el icono e papelera como símbolor de borrar.
Escribe un subtítulo genial aquí
Acceder a la web de salequesis.es e intentad comprar una entrada para cualquier evento disponible (no es necesario completar la compra). ¿Cómo podríais renombrar o reordenar esa parte de la interfaz para "hablar el lenguaje del usuario" y cumplir con la regla de relación entre el sistema y el mundo real?
3 -Control y libertad del usuario. A veces, un usuario se equivoca, es normal, y cuando eso ocurre, debemos darle la posibilidad de subsanar el error y no sentirse frustrado por no poder realizar algo. Siempre debe haber una "salida de emergencia". El usuario debe poder navegar libremente, con libertad para deshacer, explorar o interrumpir y debe ser capaz de encontrar fácilmente salidas y rutas alternativas. La implementación de esta regla por excelencia es la famosa función de deshacer en aplicaciones de procesamiento de texto o diseño gráfico, o salidas obvias como el botón "cancelar" o "volver atrás". Un buen ejemplo es Gmail, que permite recuperar emails borrados dentro de 30 segundos.
Escribe un subtítulo genial aquí
Otro ejemplo de implementación sería poder personalizar la configuración de privacidad en plataformas de redes sociales, que brinda a los usuarios el control sobre quién puede ver su contenido y cómo se comparte.
4 -Consistencia y estándares. Tenemos que ser coherentes y darle importancia a mantener la misma consistencia a toda la aplicación, es decir, mantener el lenguaje, los colores, la forma de navegación, etc. No deberían hacer que te preguntes si un icono significa lo mismo en distintos sitios. Cambiar las establecidas líneas horizontales o «menú hamburguesa», por una «carita feliz» en la navegación sería desastroso.
Escribe un subtítulo genial aquí
Reglas de oro: -Usar el mismo color para acciones similares (Google usa azul para los enlaces en todos sus productos (Gmail, Drive, etc.).) -Tipografía uniforme: Un solo tipo de fuente para títulos, otro para cuerpo. - Iconos familiares: Usar el mismo ícono de "lupa" para buscar en toda la app.
Un error común es cambiar el lugar del "Carrito" en un e-commerce.
5 - Prevención de errores. Debemos prevenir cualquier error que pueda cometer el usuario y, en caso de que lo cometa, poner a su alcance todas las opciones posibles para poder corregirlo.
Escribe un subtítulo genial aquí
Algunos ejemplos: - Confirmación de dirección de correo electrónico o de la contraseña con doble campo en los formularios. Comprobación de campos de formularios en tiempo real. - Los placeholders en campos de texto, donde aclaran la acción que debemos realizar. - Desactivar botones hasta que se completen campos obligatorios. Un error común se da en los formularios que solo muestran errores después de pulsar el botón de enviar.
6 -Reconocimiento en lugar de recuerdo Las interfaces deben promover el reconocimiento y evitar que los usuarios memoricen sus acciones o elementos al desplazarse por el sistema. Hemos de aliviar la carga cognitiva del usuario. Si un sitio web cambia constantemente la ubicación de los elementos de su menú principal, obligará al usuario a redescubrirlos cada vez que accede a la página. Si el menú principal del sitio web se mantiene en una posición fija y utiliza una estructura consistente, permitirá que el usuario lo encuentre fácilmente sin necesidad de memorizar su ubicación. Ejemplos: Barra de progreso que muestra en que parte de un video o lección de un curso te has quedado. Mostrar información junto a los iconos o cuando se pasa sobre ellos (tooltips). La famosa lista de la compra o "guardar artículos", para evitar que vuelva a buscar el artículo.
Escribe un subtítulo genial aquí
7 - Flexibilidad y eficiencia de uso La aplicación debe estar preparada para todo tipo de usuario, desde los más novatos hasta los más experimentados. Hay que proporcionar a los usuarios opciones de personalización y permitir una interacción rápida y efectiva con la aplicación. Ejemplos: - funciones como los atajos de teclado. - permitir que el sistema se adapte al flujo de trabajo del usuario permitiendo reorganizar u ocultar paneles de aplicación. - personalización de la barra de herramientas en aplicaciones ofimáticas.
Escribe un subtítulo genial aquí
8 -Diseño estético y minimalista Omitir todos aquellos elementos que generen “ruido”, no aporten información y distraigan la atención del usuario. La interface no debe contener información irrelevante o que rara vez se necesite. Se debe conocer qué tipo de contenido necesita el usuario y ocultar todas las funciones complejas que trabajan en segundo plano. Cada elemento extra compite con la información relevante y disminuye su visibilidad.
Escribe un subtítulo genial aquí
Debemos convertir lo complicado en simple, aplicando el término KISS, que significa "Keep It Simple, Stupid!", un principio de diseño muy popular tanto en el desarrollo de software como en otros muchos ámbitos, y es una forma coloquial de decir que las cosas sencillas funcionan mejor.
Ejemplos: La página principal de Apple muestra solo los productos que desean destacar. El buscador de Google solo muestra un campo de texto y un par de botones, no todos sus servicios.
9 - Ayudar a reconocer, diagnosticar y recuperarse de errores: Los mensajes de error deben expresarse en un lenguaje sencillo (sin códigos de error), indicar con precisión el problema y sugerir una solución de manera constructiva.
Escribe un subtítulo genial aquí
Un ejemplo claro son los formularios. Una mala práctica es cuando un usuario comete un error al rellenar sus datos en un formulario online y el sistema no le indica qué campo está incorrecto ni le entrega ninguna guía para corregirlo. Una solución sería resaltar el campo con el error, proporcionar un mensaje explicativo y dar sugerencias al usuario para corregirlo de manera sencilla.
10 -Ayuda y documentación Aunque nuestra web sea muy intuitiva siempre es recomendable tener una guía de como navegar en ella. El sistema deberá ofrecer información relevante al usuario que sea fácil de encontrar y no sea demasiado amplia.
Escribe un subtítulo genial aquí
Ejemplos: Navegación guiada por la web o aplicación, nada más instalarla o abrirla, donde se muestre lo básico y esencial. Sección de FAQs o preguntas frecuentes que podrían hacerse los usuarios. Especificar los requisitos mínimos, si los hay, en los campos de formulario.
Actividad
Escribe un subtítulo genial aquí
Analizar la usabilidad de la interface de Alcampo para compras online (https://www.compraonline.alcampo.es/), sobre todo la pestaña de "contacto". Usa tres heurísticas de Nielsen para evaluar la navegación. Sugiere : • Un punto fuerte: algo que realmente funcione y haga la experiencia agradable . • Un fallo garrafal: un error que grite “¡arregladme!” .
Métricas de usabilidad
Ya sabemos que la usabilidad es importante. Para saber si una interfaz es más o menos usable se utilizan las métricas de usabilidad, que son aquellas características de la interfaz que son medibles de forma objetiva. Estas características o métricas se suelen dividir en tres grupos.
Escribe un subtítulo genial aquí
- Efectividad: Mide el porcentaje de éxito con que los usuarios completan tareas propuestas (si 8 de 10 usuarios logran realizar una acción, la efectividad es del 80%). - Eficiencia: Mide el tiempo y recursos (clics, pasos) que los usuarios necesitan para completar tareas. Cuanto menos tiempo y menos pasos, mayor eficiencia. - Satisfacción del usuario: Se evalúa con escalas y cuestionarios que miden la percepción y opinión del usuario sobre la interfaz.
La norma ISO 9241 , define estos tres pilares (Eficacia, Eficiencia, Satisfacción) que todas las métricas de usabilidad buscan cuantificar.
accesibilidad
La accesibilidad es un componente fundamental de la usabilidad en el diseño de interfaces. Si bien la usabilidad se enfoca en la eficiencia y satisfacción general del usuario, y la accesibilidad en asegurar que todas las personas (incluidas las que tienen discapacidades) puedan usar un producto.
Escribe un subtítulo genial aquí
Existen multitud de elementos a tener en cuenta para hacer una aplicación más accesible. Algunos de los principios más importantes a tener en cuenta para un diseño accesible:
- Contraste adecuado: Colores que permitan distinguir texto y elementos visuales, importante para personas con dificultades visuales. - Navegación clara: Que sea posible navegar usando teclado o lectores de pantalla. - Diseño inclusivo: Evitar depender únicamente del color para transmitir información (ejemplo: rojo para error debe ir acompañado de un icono o texto). - Tamaño de fuente legible: Textos suficientemente grandes y con tipografías claras. - Compatibilidad con tecnologías asistivas: Interfaces que funcionen con lectores de pantalla, ampliadores de pantalla, etc.
Para terminar:
Escribe un subtítulo genial aquí
- Echemos un vistazo al siguiente juego : Can’t Unsee ( https://cantunsee.space/). Servirá para poner a prueba nuestra atención al detalle. Presenta pares de interfaces de diseño y debes escoger el correcto.
- Intentar registraros y no perder la cordura por la web User Inyerface ( https://userinyerface.com/), a ver cuánto tardáis en perder la paciencia. Es una parodia brillante de los errores más garrafales que hay en diseño de interfaces.
¡¡¡ hasta pronto !!!
La página de contacto a la que nos lleva el botón de la página principal es completamente distinta en diseño a la principal, no cumple la heurística de consistencia (menos mal que han dejado el logo....).
Ejemplos a mejorar: - El botón "consultar preguntas frecuentes" no lleva a ningún sitio. Sin embargo, si accedemos a las faq a través del enlace del final de la página principal, sí funciona.
- Junto al botón que pone Archivo (al final del formulario) hay un "No selected file", ¿por qué narices no está en español??? para bien o para mal no todo el mundo sabe inglés. No sería mejor poner en el botón "Adjuntar" y en el texto especificar "adjuntar archivo"? Lo otro parece directamente un error.
Origen del término KISS
El término KISS fue acuñado por el ingeniero aeronáutico Kelly Johnson, quien trabajó en Lockheed Skunk Works, una división de Lockheed Martin responsable de proyectos de desarrollo de aeronaves. Johnson sostenía que los sistemas diseñados deberían ser tan simples que incluso un mecánico de bajo nivel, sin demasiada experiencia, pudiera repararlos bajo condiciones de campo.
En la home de Eroski, por ejemplo, utilizan un icono de una manzana para redirigirnos al “súper online”, una vez estamos en la página del súper, el mismo icono pero con el ancho brevemente alargado, nos dirige a la sección de “productos frescos”.
Podemos ver lo que pasa cuando añadimos un producto al carrito de la compra en dos webs diferentes. En Made.com nos indica con una ventana emergente que hemos añadido el producto, y lo detalla. Si en cualquier momento de la navegación queremos saber qué llevamos seleccionado sin dejar de navegar, pulsamos en la cesta y se abre una ventana con lo que llevamos detallado. En la web de Alcampo (compraonline.alcampo.es) sin embargo, podemos ir añadiendo productos y lo único que cambia es el total de la cesta y el número de productos. Si queremos ver lo que llevamos seleccionado, pulsando nos echará de donde estemos para llevarnos al carrito.
En la web de la sala Equis, al navegar en la taquilla, resulta muy complicado saber dónde hacer clic para comprar una entrada de cine, no tiene un botón comprar como tal, es un campo de tabla entero. Una vez que pulsas, puede que tengas que hacer scroll en el ratón para que salga la opción de comprar, que tampoco es un botón sino una línea entera de lado a lado de la pantalla.Pasa un rato hasta que descubres el camino a seguir (la hora de sesión) y una vez seleccionada la hora y elegido el número de entradas, te aparece el precio. Pero sorpresa, aquí no te aparece la opción de comprar. Tardas un tiempo hasta darte cuenta de que tienes que seleccionar la categoría “Elegir butacas” que está en la parte superior derecha para proseguir con la compra.
Alcampo incorporó una nueva funcionalidad en su web : el apartado de recetas "La Cocina de Alcampo". Es un buscador de recetas por familias de productos (carne, pescado, verduras, etc) y por temporada. Una vez dentro de la receta está lo genial, te permite en un solo botón acceder a todos los ingredientes de la receta para comprarlos online, incluso ofrece varias marcas en algunos ingredientes. Se trata de una funcionalidad creada de un modo muy intuitivo y sencillo, evitas que el usuario busque por toda la web (además incentivas la compra de productos que el cliente no tenía previstos).