plUX: Turning Art Into Practical Web Design — interactive art meets business driven UX
by Maxim Bassin and Ronen Wolfson
Web UI interactions and UX are about to significantly change in the upcoming years.
For web design, the past decade or so was mostly about optimizing colors, shapes, and animations. Very little focus was given to meaningful interactions that drive business value. In the last couple of years, the digital art scene provided us with a wide variety of small, sophisticated, addictive interactions. Here is one of them:
Now it is the time to take this art — the creative expression of self, and make it a design — a purpose-driven solution.
“When I was doing my Masters in Design, I was amazed by the state of the technology, and how it infuses the art world of interactions. As a Product Manager, I was missing the link between those breathtaking experiences and the practical word of business and design. When I first saw this: “metaballs” (see the example above), I was so delighted and engaged. On that day, I couldn’t stop thinking about “How come I don’t have that feeling in the products I use?”, “How can this delight and engagement be channeled into getting better business results?”. Luckily enough, I wasn’t the only one. I teamed up with Ronen (Interaction designer), who was in my class. He and I worked on some advanced interaction art projects together during our studies and beyond. When we got exposed to some of the latest interaction arts projects, we both felt that something big is coming up” — Maxim Bassin
“It's like seeing a giant wave of awesomeness is about to hit us, but no one is aware.” — Ronen Wolfson
We both felt a huge hunger for a new era of practical web interactions. We’ve started to explore this amazing world of advanced interactions, and came across a huge variety of ready-made interactions. Here are a few javascript libraries:
In digital interactive art, it is about creating a momentary state of engagement. Where the user is engaged for a limited amount of time, in a personalized, playful experience. On the contrary, web design is mostly about driving to action. doing that by using contrast, sophisticated colors, spacing, animations, clever microcopy, and popups.
It was clear to us that those momentary states of engagement from digital art should serve a purpose in modern web design.
We’ve decided to pick the Metaballs example that we both were very moved by, and tried to think of ways that it can solve real-life challenges in web design. The ground rules we followed for the interaction:
- In context — will be related to the action the user needs to take
- Not intrusive —will not be distracting, nor overshadow the actual content
- Playful —will be fun :)
We’ve started with Click Conversion. For web design, one of the most challenging tasks is to make that visitor click — whether its an “order”, “book a demo”, ”signup”, “rate” or “show more”. We've analyzed the common tools for improving that click conversion:
- Provide a clear value for the visitor
2. Make the CTA (call-to-action) very clear and visible (put it in several places and next to the value description)
3. Catch the eye of the visitor with clever contrast and animations
4. Add clever microcopy bits to get the visitor at ease, paint a clearer value and lower their defenses
5. Add social proof (e.g. 2,569 people already signed up) next to the conversion CTA — to lower visitors’ fear of commitment
As you can see above, the methods are focusing on grabbing attention. It's easy to make people click when they are looking for that value in the first place. Even easier when they are willing to put the effort (e.g. spend money, share personal details, invest time or spread the word on social media). The real challenge is to address the majority of the visitors, who are usually considering the value, but not sure that they want to put the effort.
Usually, people would spend a fraction of a second to decide on whether to convert or not. Our thought was to create a momentary engagement, related to the click, holding the user enough time in a playful state to make that click.
One of our first prototypes was the rating widget. All those cases where a user is asked to rate something — whether its a movie she just saw, a product he bought or a service she received. Those are non-mandatory actions that are usually perceived as a burden, but we as web designers would really like people willing to take them. The real challenge is not to make the users decide on the score, but rather to share it — at scale. We’ve leveraged the Metaballs interaction for that challenge.
Examples below truly shine only on desktop computers (for now) 🤓
Example#1: plUX rating
Business goal: Increase rating submission conversion — from impression to submission
Hypothesis: Pausing more than a second on the widget in a playful state of mind will nudge more people to submit their rating
Design tactic: Mimic a decision process by providing playful interaction with the options of the rating widget
Although our small scale experience was far from being production-ready polished, it showed great engagement and a lot of interest. The stickiness between the different stars mimicked the act of flounder. The users were experiencing task related playfulness and delight. The prolonged time on that interaction helped to promote the business goal of increasing the rating response rate. At this point, we knew that we are on the right path. This is where we came up with the “playful UX’” concept — the plUX.
Below are another 2 open source prototypes that we’ve created, and did well with our target groups.
Examples below truly shine only on desktop computers (for now) 🤓
Example#2: plUX Social Share
Business goal: Increase sharing conversion of the page
Hypothesis: Playful interaction will focus the user on the options to share, and will have them at ease to actually click since they would have a fun experience
Design tactic: Make the social icon act like they are begging the mouse pointer to click on them — in a subtle way that will not interfere with the rest of the page
Example#3: plUX Scrolling text
Business goal: Make people consume the written content from start to end
Hypothesis: Variable behavior will drive people’s curiosity to explore the content — in a similar manner to the parallax effect
Design tactic: Scatter the letters from the bottom part of the text, and make them come to life as the user scrolls through the content
And now, as we are working on larger scale experiments. The goals are:
- Spread the word among the design community — this is you 😉
- Have more quantitative data to show the direct impact of plUX
- Explore the way it holds up in repeating interactions
- Gain qualitative feedback to learn and grow
As you can see in the few examples below, we are not the only ones picking up this direction:
Dynamic menu by James Bosworth
Progress bar in the Invision Blog (as you scroll, look at the horizontal progress bar at the top)
This is a “greenfield” in web design, and with more minds exposed to the new thinking, will bring us a very exciting future.
Feel free to reuse or adapt our examples above for your own products/projects — they are completely free to use (commercial purposes included).
Share your thoughts/suggestions/projects in the comments below, and let’s get this ball rolling 🦄❤️
