Given that public speaking is fear number one for me, whenever I am approached to speak in front of large groups of professionals my first fantasy is that the talk will be cancelled. ‘Surely a hurricane will come through the same day as the event! The date is also dangerously close to flu season – I’m most definitely going to get the flu!’ That internal dialogue began when my creative director here at SD, Mickey Winter, first mentioned the two of us giving a talk at Connected Commerce 2018, a conference in New York City. She might as well have asked me to climb Mt. Everest. But after the panic subsided and reality set in, I realized that planning ahead, one step at a time, eventually makes that mountain look more like a hill.
And that’s just what we did. We prepped and rehearsed and came up with relatable content not only for merchants, but for every person interested in the attainment of joy. We were inspired by Ingrid Fetel Lee’s 2018 TedTalk “Where joy hides and how to find it”. We researched what brings us joy, how we can manifest these ideas into a web store’s UX/UI, and some of our own work at SD that represents these ideas.
After arriving at the conference, Mickey and I were resolute in executing this presentation with confidence. The conference itself is a one-day summit that brings together brands, retailers, and solution providers for a day of talks and networking, hosted by our good friends at Logicbroker. Those dreaded butterflies fluttered for the hours leading up to our talk, and lingered backstage as the two of us waited for our turn. But after shooing them off with some silent aerobic exercises just before we walked into the spotlight, we finally presented.
And here you have it, a brief summary of our talk:
5 UX/UI Principals that Evoke Joy
What is joy and how can we use it?
First, there is distinction that needs to be made between the feeling of joy and the feeling of happiness. Both are emotions almost every human experience in a lifetime. Happiness is how good we feel measured over time whereas joy is what you feel in the moment. Right now. Psychologists describe the word joy as is an intense, momentary experience of positive emotion.
What about the images below give off a feeling joy? If you analyze closely you’ll find that there are 5 common UX/UI patterns seen in all of these images that can help evoke joy within an ecommerce experience.
#1 Roundness or Curves
From an evolutionary perspective, humans prefer rounded shapes compared to shapes with sharp angles. Sharp angles often signify danger, while curves elicit a feeling of ease. Incorporating this into a UI could be as simple as designing buttons with rounded corners or placing imagery within rounded containers.
RileyHome utilizes round shapes throughout the homepage and navigation elements.
#2 Pops of Color
Who doesn’t love a beautiful rainbow? Color gives of a feeling of energy and signals to us life itself. People in colorful spaces often feel more alert, confident, and friendlier. When it comes to UI elements, color is easy to manifest in calls to action, promotional banners, and even the product photography itself.
Industry West utilizes color in their photography and UI to elicit a feeling of joy.
#3 Floating or Lightness
If you’ve ever swung high on a swing set, you know the feeling of being completely weightless for the brief second before gravity kicks in. The feeling of floating or lightness can be seen and felt when adequate white space is used throughout a page. Customers find content easier to digest when a page is less cluttered.
Malin & Goetz utilizes a white space around its products and within the packaging design itself, giving a feeling of lightness.
#4 Abundance or Multiples
From a primal perspective, scarcity is a dangerous feeling. An abundance of food means survival. Showing products in groups or in a way that it looks like they are abundant will make Customers feel more at ease.
Baked By Melissa showcases multiple cupcakes in almost every product shot.
#5 Symmetrical Shapes
Symmetry is beautiful. People generally prefer symmetrical faces to non-symmetrical ones. We are hardwired to look for patterns and balance, and when we see it, it just feels right. Symmetry in UI can be done using equally sized images or similar content on both sides of the page.
Lib-Tech’s homepage is design to be completely symmetrical.
These 5 principles designers and merchants alike can follow when creating customer experiences:
1. Roundness or Curves
2. Pops of Color
3. Floating or Lightness
4. Abundance or Multiples
5. Symmetrical Shapes
If these principals are incorporated tactfully into a web store’s UX/UI, customers will leave the store feeling wonderful about their purchases, and likely to return for more.
As Mickey and I walked off the stage a warm sense of relief and excitement flooded over me. For both of us, it was our first time presenting to a crowd of this size, and the feeling of personal accomplishment was immensely fulfilling. The best part of the whole experience was meeting with professionals after the talk who truly wanted to discuss ideas further with us. We both agreed, the experience was a joyous first!
Written by: Lindsay Stork, Interactive Designer