Adobe

decor

Web Platform Team Blog

Making the web awesome

Lean Experiment: Overlay Effects

A very popular design trend on the web in recent years has been various forms of overlay effects, e.g., using large visual media (images, video) as a background and overlaying text on top of it using different techniques to create contrast between the content and the graphics. We see this in the form common UI elements – menu dropdowns, popup windows, stylized web site design, and really, everywhere it can be. Perhaps its foundation came from some native OS aesthetics introduced some time ago and have more recently become more ubiquitous, if not controversially so. As we spoke to web professionals about these trends, one person thought this design paradigm is so popular because it is “just so visually seductive.”

MakersQuarter.com makes liberal use of several of these overlay effects, resulting in rich and visually stunning design.

MakersQuarter.com makes liberal use of several of these overlay effects across its site.

As the charter of the Adobe Web Platform team is to Make the Web Awesome—specifically, by making a more expressive web—we’ve been looking into these types of effects and how we might make them better, easier to create, and more beautiful. With the work that we do on this team, we’re in a unique position to listen to our customers, take what we learn from them, and improve the Web to better enable them to be expressive and creative.

The Lean Experiment

At Adobe, we’ve recently adopted the also very popular Lean Startup Methodology. Teams across the company from Engineering to Marketing have been using it to inform decisions on virtually all aspects of the business. When examining these overlay effects to determine if there was anything we at Adobe could do to help, my colleague Bear Travis and I conducted a Lean Experiment. We did not have a particular solution in mind, but rather were using this methodology to identify and/or define the problem.

We began our exploration looking at only the frosted glass effect made popular by iOS 7. We quickly discovered a cluster of similar overlay effects and expanded our experiment to include frosted glass, blurred backgrounds, gradient fades, image tinting, and transparency overlays.

Tinted image, Newton Running. Transparency overlay, Veer. Blurred background, Dego Interactive. Gradient fade, FMK Catering

During our research phase, Bear also wrote an article on CSS Tricks on how to achieve some of these effects using CSS filters. As we looked at many examples on the web of these effects, we noticed that people were creating them in many different ways. Some achieved the effects with web technologies such as CSS opacity, filters, and linear gradients. We noticed that many others were making edits directly to the images themselves. In an effort to understand why people used so many different methods, especially those who used non-web solutions, we formed our experiment around this.

The Hypothesis

After coming up with our list of assumptions about how people are using these effects, we came up with the following hypothesis to test:

“Web creative professionals do not use some overlay effects because they are difficult to reproduce on the web.”

We will know this is true when:

  • Respondents say they had to alter their visual / overlay effect designs to suit what was possible / easy to do on the web.
  • Respondents dismiss some effects for technical rather than aesthetic reasons.

The Method

The main method we used to test our hypothesis was a series of interviews with Web professionals, from designers to developers and everything in between. Each kindly agreed to give us an hour of their time. The interviews consisted of a set of open-ended questions, designed to allow responses to go in any direction that could lead to new learning. In addition to the questions, we had visual examples of each of these effects that we showed interviewees around which to ask more specific questions. For the visual examples, we used variations of the pelican demo in Bear’s article on CSS Tricks.

pelicans

The Results

The Lean Experiment measures results in two ways – quantitative and qualitative.

The quantitative results were unanimous: of all the people we interviewed, none responded that the web platform’s capabilities prevented them from creating the overlay effects they wanted.

The qualitative results could be summarized as follows:

  • Large visuals, including as backgrounds, were seen as a popular trend on the web. Some were attracted to the trend while some wanted to break away from it.
  • Web designers and developers were happy with the current set of overlay effects because they were familiar, easy to create, and known to work (performance, accessibility, and compatibility being the primary concerns).
  • It is unclear whether web creatives would use a different set of effects if they matched the same criteria, but it is clear that they are not actively searching or thinking about different effects.

Conclusion

Because we revealed no compelling information to pursue further in this area and since none of the people we interviewed seemed to express any difficulties in using these effects, we were able to prove our hypothesis false. This research shows that web professionals are able to do all the overlay effects they want to do. However, we believe that over time they’ll want to do other things that they may not be able to or may only be able to do using new emerging features. This is why we’ll remain interested in the issue, even though we see nothing actionable right now. We’d still certainly be interested in hearing more on this topic and could be willing to re-open the investigation, but for now we are satisfied that that there is not a current problem here that would require a more uniform solution.

If you have opinions or input on this topic, please let us know by taking a few minutes to complete our quick survey. If we gather more information to cause us to revisit this, we can then contact you to discuss your ideas further.

Leave a Reply

Your email address will not be published. Required fields are marked *


9 − = seven

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>