Miguel Rodrigo

Miguel Rodrigo

UX/UI Designer
Related topics: Creatividad Fotografía UI

7 buenas prácticas para usar fotografías en UI

8 marzo 2022
2 minutos

En el diseño de interfaz de usuario, una buena parte del apartado visual de un producto digital, como puede ser una web o una aplicación móvil, reside en los elementos gráficos que contiene como las ilustraciones o fotografías.

Es en estas últimas es donde queremos hacer hincapié en este artículo, ya que hoy en día tenemos acceso a una gran cantidad de recursos fotográficos de manera gratuita o por medios de pago que en algunas ocasiones no sabemos gestionar correctamente.

A continuación te compartimos 7 buenas prácticas que deben seguirse en el diseño UI para mejorar tu producto digital y evitar errores que perjudiquen la interfaz, usabilidad y accesibilidad.

 

1.No maltrates a las imágenes, dales la importancia que necesitan

Evita deformar las imágenes al colocarlas en su placeholder. Una imagen deformada crea un rechazo casi automático en la persona que la observa y ese rechazo afecta en la manera en la que el usuario interpreta la marca y cómo será su relación con ella en el futuro.

 

2. La imagen apoya al mensaje, y no al revés

La información más relevante dentro de la web o app debe ser el contenido de texto que la forma. Las imágenes que usemos para acompañar a ese contenido deben únicamente reforzar ese mensaje, no ser el mensaje.

 

3. Menos es más

Una fotografía minimalista ayuda a sintetizar la carga cognitiva de la imagen mucho más rápido. De esta manera enfocamos la atención del usuario en un solo punto, como por ejemplo hace Apple con sus fotografías de producto.

 

4. No diseñes en base a una fotografía

El diseño visual de la web o app no debería basarse en la composición o estructura de una fotografía. Esto nos puede acarrear problemas en un futuro hipotético en el cual, por ejemplo, se nos pida actualizar la imagen por una mas actual o en el caso en el que la legibilidad de los textos se vea afectada por dicha imagen.

 

5. Contenido real, no stock

A la hora de incorporar fotografías a nuestra web, debemos evitar la estética de típica imagen de stock (gente sonriendo sin ningún contexto, fondos blancos puros, rostros mirando directamente a cámara, etc), esto puede afectar a la credibilidad de la totalidad de la web e incluso del producto final. El contenido que añadamos debe ser lo más realista posible. Siempre que sea posible debemos utilizar contenido original hecho por un fotógrafo dedicado. Como esto no siempre es posible, se debe usar imágenes con una estética más cotidiana, con las que el usuario pueda empatizar.

No dejes que una mala fotografía arruine todo el diseño de una página y la experiencia del usuario que la visita.

 

6. Imágenes relevantes, la estética no lo es todo

En algunos casos se suelen añadir imágenes por pura estética, para rellenar espacios vacíos o sin ninguna utilidad aparente. Siempre que incluyamos una imagen debe ser porque tiene una utilidad clara.

Las imágenes meramente decorativas pocas veces aportan una experiencia positiva a los usuarios: en muchos casos éstas simplemente se ignoran y en muchos otros casos pueden distraer la atención del foco principal del site.

Por ejemplo, en muchas webs corporativas se incluyen fotografías abstractas, de arquitectura o similares. Aunque la idea es dar la sensación de ser una empresa moderna, el resultado final es que estas fotografías aportan poca información relevante a los visitantes.

 

7. Añade títulos alternativos para mejorar la accesibilidad

No debemos olvidar a los visitantes con dificultades visuales que deben utilizar herramientas complementarias para consumir el contenido que les ofrecemos. Añadir textos alternativos a las imágenes de la web o app es una práctica muy recomendable para hacer nuestro sitio mucho más accesible.

 

¿Te ha gustado este artículo? No te pierdas ninguna novedad del mundo UX/UI en el blog Making Science. Si tienes un caso concreto, nuestro equipo de expertos podrá ayudarte. Escríbenos a info@makingscience.com. ¡Te esperamos! ?