Diseña el interfaz de usuario de forma que la decisión que debe de tomar el usuario sea la más fácil de tomar.

Un usuario frustrado

Veamos la encuesta anual de frameworks más usados: State of CSS 2024: Libraries & Tools.

Cada norma va con un ejemplo de cómo se hace mal y cómo se hace bien. Las normas y los ejemplos están sacados del libro que usamos en el curso.

Haz que las cosas que no están relacionadas estén muy separadas entre sí. Es decir, que haya mucho espacio en blanco, y luego ya veremos si las juntas un poco.

Lo que va junto tiene que estar más cerca entre sí que de lo demás. En un formulario, si la etiqueta está a la misma distancia del campo de arriba que del de abajo, no se sabe de cuál es.

Mal	Bien

Haz que las cosas estén alineadas a una recta imaginaria que va de arriba a abajo.

Cuando en una línea hay textos de distinto tamaño, se alinean por la línea base (donde se apoyan las letras), no por el centro: align-items: baseline en vez de center.

Mal	Bien

Los diseños no tienen que ocupar el 100% de la pantalla, ya que en pantallas grandes queda mal. Cada cosa ocupa lo que necesita: un formulario de login no necesita más de 300 o 400 píxeles.

Mal
Bien

Con el texto pasa lo mismo: una línea de más de 75 caracteres cuesta de leer porque al saltar a la siguiente se pierde el sitio. Limita el ancho de los párrafos a unos 60 caracteres con max-width en em o ch.

Mal
Bien

No todo es igual de importante:

• Resalta lo importante: con más peso de letra (negrita) y un color oscuro, no solo con más tamaño.
• Desenfatiza lo que no es importante: con un gris en vez del negro del texto, o más pequeño.

Mal	Bien

Sobre un fondo de color, el texto secundario no se pone gris, que queda apagado y sucio: se usa el mismo matiz del fondo con mucha más luminosidad.

Mal	Bien

Los títulos <h1> no tienen por qué destacar: a veces es obvio de qué va la página y lo importante es el contenido. <h1> es para que el buscador sepa qué es lo importante, no dice cómo se tiene que ver.

Mal	Bien

Evita las etiquetas (labels). Si ves «alopez@iesmislata.es» ya sabes que es un correo: no hace falta poner «Correo:». Si hace falta la etiqueta, que forme parte de la frase: «3 en stock» en vez de «Stock: 3». Y si las usas, que estén desenfatizadas.

Mal	Bien

• Texto largo, a la izquierda: centrar solo vale para un título o una o dos líneas. Un párrafo centrado cuesta de leer porque cada línea empieza en un sitio distinto.
• Números, a la derecha: en una tabla, así las unidades, decenas y céntimos quedan uno debajo de otro y se comparan de un vistazo.

Mal	Bien

Los bordes llenan la pantalla de líneas. Para separar cosas hay alternativas mejores: una sombra, un color de fondo distinto o simplemente más espacio.

Mal	Bien

Una foto tiene zonas claras y oscuras, así que el texto encima no se lee en todas partes. Se pone una capa oscura semitransparente (un degradado) entre la imagen y el texto.

Mal	Bien

Hay personas que no distinguen el rojo del verde. El color acompaña, pero el significado lo da también un texto o un icono.

Mal	Bien

La primera vez que el usuario entra, las listas están vacías. Esa pantalla también se diseña: qué falta y un botón para crear lo primero.

Mal	Bien

• Las esquinas cuadradas indican seriedad. Las esquinas muy redondeadas son muy informales (border-radius).
• Nunca usar un carrusel. https://shouldiuseacarousel.com/

Vídeos de Roberto Jiron sobre errores típicos de diseño:

Deja de centrar todos tus textos	No uses botones primarios para todo	Deja de meter botones en tu barra
Deja de diseñar cards planas	No diseñes modales de esta manera	No uses textos diminutos

¿En qué se fija un diseñador? Haz el siguiente test y fíjate en los pequeños detalles: Iniciar el test. Se debe elegir entre la imagen de la izquierda o de la derecha y luego se puede comparar para ver las diferencias.

Mas información sobre el diseño:

• The ultimate UI design guide
• Why Beginning Designers Don't Need to Learn Grids, Type Scales, or Color Theory (and other “Designer Dogma”)
• Short, Useful Design Tips For UI/UX Designers: Ejemplos sencillos de como mejorar el diseño. Del creador del libro anterior.
• The 7 most common UI mistakes: Ejemplos sencillos de como mejorar el diseño. Del creador del libro anterior. ref
• Color in UI Design: A (Practical) Framework
• UI Color Cheatsheet.pdf
• Send me your Landing Page and I will give you UI/UX Feedback: La gente envía su página web y un diseñador cuenta como mejorar el diseño.
• 50+ practical UI/UX design tips (1 each weekday)
• Visual design rules you can safely follow every time
• 7 Rules for Creating Gorgeous UI (Updated for 2022)
• 4 Rules for Intuitive UX

• Usabilidad en base a los estilos de los iconos:
  • Filled-in vs. Outline icons: The impact of icon style on usability
  • Solid Vs. Outline Icons: Which Are Faster to Recognize?
  • Outline Icons vs. Solid Icons: Which are Faster to Recognize and When?

Las cosas que están "encima" debe ser más claras que las que están abajo.

Mas informacion:

• Rule 1: Light Comes From the Sky
• la_luz_viene_del_cielo.pdf

Las sombras se usan para dar sensación de profundidad sin necesidad de bordes. Suponemos que la luz viene de arriba.

Qué sombras se usan y cuántas se decide en el sistema de diseño: Sombras.

Al hacer un interfaz de usuario, jugar con dos colores que hagan contraste.

• En la siguiente imagen se pueden ver la rueda de colores que hacen contraste y se pueden generar en Paletton - The Color Scheme Designer

Más información:

• contraste_de_color.pdf
• https://www.youtube.com/shorts/YLmAsDw44a8

La experiencia de usuario es conseguir que el usuario se sienta cómodo usando la aplicación.

• UX Myths: Mitos en la experiencia de usuario
• Reglas y principios de usabilidad: Cosas a tener en cuenta al diseñar un interfaz de usuario
• 5 ejemplos en los que la ley de Hick te ayuda a diseñar tu web: Minimiza el Nº de opciones para el usuario
• Checklist Design: Lista de cosas a incluir en cada tipo de página.
• 2 artículos criticando los interfaces actuales:
  • The Decline of Usability: 1º Parte (2020)
  • The Decline of Usability: Revisited: 2º Parte (2023)

La siguiente web está hecha para conseguir la peor experiencia de usuario posible: User Inyerface - A worst-practice UI experiment

Para fuentes grandes (títulos) que sea menor la altura de las minúsculas (x-height) y menos espaciado entre letras. Para fuentes pequeñas que sea mayor la altura de las minúsculas (x-height) y mas espaciado entre letras.

• Herramienta:
  • Type Anything: Herramienta para ver como queda una página según la tipografía
  • Interactive Typography Tutorial – Learn UI Design
• Diseño
  • Elección de las fuentes para el diseño de una página web
  • Mi método para elegir y combinar tipografías
  • Universal Sans: Permite diseñar de forma exacta una fuente sin serif ¹⁾ . Pero vale como ejemplo para ver que se puede cambiar en una fuente.

• Fuentes en la Web
  • Font Awesome, the iconic font and CSS toolkit
  • Indica la fuente a partir de una foto
  • 10 fuentes gratuitas de 8 estilos distintos de enorme calidad
  • Usando fuentes descargadas en una página Web
  • creating_and_implementing_your_own_icon_font_a_tutorial_-_the_media_temple_blog.pdf: Crear tu propia fuente de iconos ²⁾
  • ejemplo_fuentes.zip: Ejemplo de creación de fuente con iconos y uso de fuentes descargadas

• El tipo de la letra "a" hace que sea más formal o informal.

Enfatizar algo no es solo hacer la letra más grande sino usar una fuente con más peso (Weight)

Mas información:

• In Defense of Papyrus: Avatar Uses the World’s Second-Most-Hated Font to Signal the Downfall of Civilization: Artículo sobre Papyrus, la fuente del título de la película Avatar, y lo que transmite
• "Papyrus" Ryan Gosling en SNL (subtítulos en español): Sketch de humor sobre la misma fuente de Avatar
• Lo que dice tu logo: Vídeo corto sobre lo que transmite el diseño de un logo

• Formatos de Imagenes
  • GIF, JPG and PNG – What’s the Difference?
  • AVIF has landed: Formatos de imágenes con compresión
• Formatos de Audio
  • Formatos de audio: Todo lo que deberías saber
  • HTML5 Audio
• Formatos de Video
  • Formatos de video: Todo lo que deberías saber
  • HTML5 Video

Busca 2 Webs y para cada una ellas indica como usan los siguientes conceptos:

• Uso del espacio en blanco (Separación entre componentes)
• Uso de paletas de colores (Usar poco colores con muchas variaciones de ellos)
• Ancho máximo de la página
• Indica como resaltan los importante
• Alineación de la página
• Uso de Labels (si se usan , si forman parte de la frase, si están desenfatizadas, )

Mira el siguiente artículo Un cambio de imagen para la Formación Profesional en la Comunitat Valenciana y la siguiente web FP Valenciana.

Comenta lo siguiente:

• ¿Resultan útiles las animaciones?
• ¿Resultan útiles los colores?
• ¿Que está mal en el buscador?
• ¿Cuando se usan mayúsculas?¿Es necesario?

Busca en varias web e indica si algunas de ellas cumple o no cumple alguno de las reglas, principios o mitos de la usabilidad (experiencia de usuario).

Mira la web https://necesitountrastero.es/ y critica todas aquellas cosas relativas al diseño

Busca una web que incumpla tres de las normas de diseño del tema. Para cada una, haz una captura de cómo está (mal) y explica cómo debería ser (bien).