02/03/2016

Hero image: lo primero que ven nuestros usuarios

Hero image: lo primero que ven nuestros usuarios

Se conoce como hero image a la imagen de gran tamaño que aparece como el elemento visualmente más destacado de una página web. Generalmente se ubica en el centro de la página de inicio, al frente de cualquier otro objeto o, a lo sumo, con algunas líneas de texto encima. Sin embargo, algunos incluyen en este concepto a las grandes imágenes de fondo. Está diseñada para ser lo primero que llama la atención del usuario al ingresar a la página. Por eso, suele contener información sobre temas importantes, como los valores de la empresa, una característica prominente del producto, el artículo más vendido, una noticia destacada, etc. La diseñadora de UX Kara Pernice sugiere utilizar hero images en lugar de sliders. AndrewElsass usa hero images (con un filtro de color) en el encabezado de sus páginas internas. A continuación ofrecemos algunos consejos para sacarle el máximo provecho a este recurso.

  • Establecer un propósito. La agencia Avatar New York opina que las hero images le brindan a una empresa la posibilidad de expresar su propósito y valor, y sugiere hacerse estas preguntas para elegir bien:
    • ¿Cuál es el valor de mis bienes o servicios?
    • ¿Qué reacción espero por parte de los clientes?
    • ¿Hay una única imagen que refleje múltiples facetas de la empresa?
    • ¿Existe la posibilidad de que los visitantes malinterpreten la imagen?
  • Procurar la calidad. Obviamente, la imagen debe haber sido tomada por un fotógrafo profesional especialmente para la ocasión. Las fotos obtenidas de bancos de imágenes son reconocibles y dejan una mala impresión. Además, la imagen debe contar con una buena definición. Reglas similares aplican si no se trata de una foto, sino de una ilustración.
  • Optimizar la imagen. Las imágenes de gran resolución pueden alcanzar un peso importante. No sería ideal que todo el contenido de la página esté cargado antes de que termine de cargarse la imagen. Usar técnicas para reducir el tamaño de la foto, o bien mostrar un preloader, son opciones a tener en cuenta en estos casos.
  • Integrar con el texto. Si vamos a colocar texto encima de la imagen, este debe ser legible. El texto debería tener un tamaño generoso (especialmente si se trata de un título) y un buen contraste para destacarse sobre el fondo. Difuminar ligeramente la imagen es una buena idea si no nos interesa que sus detalles se aprecien al máximo.
  • Ubicar bien los elementos. Los botones, los menús y el contenido no deberían tapar partes importantes de la foto.
  • Probar en varias resoluciones. Las hero images tienen, por definición, un gran tamaño, pero ¿qué ocurre en dispositivos pequeños? Debemos probar la imagen en distintas resoluciones, procurando que conserve su significado en todas ellas. Las opciones son reducir el tamaño (puede perderse demasiado detalle), recortarla (dejando fuera las partes menos importantes) o reemplazarla por otra.

Aplicando estos principios crearemos la mejor hero image posible: aquella que transmita exactamente la emoción, la información o los valores que nos gustaría que el usuario asimile apenas entra en nuestro sitio web.

0

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce