7 Reglas para crear una interfaz de usuario (UI) maravillosa (Parte 1)

¿Para quién es esta guía?

• Desarrolladores que quieren ser capaces de diseñar su propia interfaz de usuario en un abrir y cerrar de ojos.
• Diseñadores UX que saben que pueden vender un pack UX + UI en su carrera profesional.
• Gente de marketing en general que quiere ampliar sus conocimientos sobre interfaces
• Para mí mismo y mi formación

Reglas UI para unas buenas interfaces

En este post explicaré tres reglas, me reservo las otras para una segunda parte:

1. La luz viene del cielo (Parte I)
2. En blanco y negro primero (Parte II)
3. Duplica los espacios en blanco (Parte II)
4. Aprende a superponer correctamente los textos sobre las imágenes (Parte III)
5. Diseñar el texto dándole pop— y un-pop (más visibilidad, menos visibilidad) (Parte III)
6. Utilizar sólo fuentes de buena calidad (Parte III)
7. Fusila o inspírate de otros con «estilo» (Parte III)

Regla 1: La luz viene del cielo

Las sombras son señales muy valiosas para decirle al cerebro humano qué elementos de la interfaz de usuario queremos encontrar.

Debemos dotar a los elementos de luz y oscuridad siempre desde arriba, ya que de hacerlo desde abajo se vería un tanto extraño al ojo humano.

Cuando la luz viene del cielo, ilumina la parte superior de las cosas y proyecta sombras debajo de ellas.

Hay sombras en los lados inferiores de casi todos los elementos de la interfaz de usuario. Nuestras pantallas son planas, pero hemos invertido una gran cantidad de arte en hacer que casi todo en ellas parezca 3D.

En estos botones que nos parecen relativamente planos, hay mucho juego de luz que analizar:

1. El botón sin pulsar (arriba) tiene un borde inferior oscuro. La luz no llega a esa zona.
2. El botón sin pulsar es ligeramente más claro en la parte superior que en la inferior, tiene un degradado. Esto se debe a que imita una superficie levemente curvada.
3. El botón sin pulsar también proyecta una sombra muy sutil, en el zoom de su esquina se puede apreciar mejor.
4. El botón pulsado, sigue manteniéndose más oscuro en la parte inferior que en la superior, pero es más oscuro en general – esto se debe a que está en al mismo nivel de profundidad que la  pantalla y la luz no puede darle con tanta facilidad. Se podría argumentar que todos los botones pulsados que vemos en la vida real también son más oscuros porque nuestras manos bloquean la luz.

No está mal para ser sólo un botón, hay 4 efectos de luz presentes.

Ahora veamos este otro caso.

iOS 6 es un poco anticuado, pero es un buen caso de estudio en el comportamiento de la luz.

Analicemos todos los efectos de luz que tienen este caso:

• La parte superior del panel (inset control panel en el esquema) proyecta una pequeña sombra
• La barra azul «ON» (slider track) es cóncava y la parte inferior refleja más luz
• Los iconos se muestran sutilmente . ¿Ves el borde brillante en la parte superior? Esto representa una superficie perpendicular a la fuente de luz, es como si la luz rebotase perpendicularmente de los iconos a tus ojos.
• La hendidura del divider (divider notch en el esquema) se representa sombreada, alejada de la luz.

Otro ejemplo de divider

La lista de suscriptores de Mailrelay es otro ejemplo de sombreado

Elementos con sombra interior, inset, proyectada hacia dentro:

• Text input fields
• Botones pulsados
• Slider tracks
• Radio button (sin seleccionar)
• Checkboxes

Elementos con sombra exterior, outset, proyectada hacia fuera:

• Botones (sin pulsar)
• Botones del Slider
• Dropdown controls
• Cards
• Popups

¿Y qué pasó con el Flat Design?

iOS7 causó sensación en la comunidad tecnológica por su «flat design». Esto quiere decir que es literalmente plano. No hay protuberancias ni hendiduras simuladas, sólo líneas y formas de colores sólidos.

Me encanta lo limpio y simple tanto como a cualquiera, pero como veis esta tendencia duró poco, dando paso a lo que se conoció como material design y que Google aplicó como su estándar de diseño.

Es un lenguaje visual unificado que -en su conjunto- busca imitar el mundo físico.

Personalmente material design me parece bastante cargante, ahora la tendencia es usar un diseño UI semi-flat.

Sigue siendo limpio, sigue siendo simple, pero tiene algunas sombras y da pistas al usuario sobre qué tocar/deslizar/hacer click.

OS X Yosemite— un buen ejemplo de interfaz semi-flat.

Y hasta aquí un primer análisis de reglas de UI imprescindibles, continuará en la parte II.