Subscribe

Subscribe to Blog



On this Valentine’s Day when so many are professing their love, why not give your B2B product a little love as well? It’s easy to get caught-up in the mundane day-to-day design problems that need solving, but imagine how bringing a little excitement into your designs might change the relationship you and your customers have with your product. It’s time to show your product some love. You can create a magical match or see your product in a new light with these four design partners:

The Charmer: Page & Content Transitions

If implemented without care, these charmers can fool users and offer little value. Many transitions, however, offer great value, helping provide context to interactions.

Make it Meaningful:

Here are some examples of how to add value with transitions.

Dashboard Interface Transition, Valentine Salmon, https://dribbble.com/shots/3252608-Dashboard-interface-transition

Above: Content selection animation maintaining context by eliminating non-relevant content and transitioning the selected content to a position of focus.

 

Fintech Product Web Transition, Ramotion, https://dribbble.com/shots/3363539-Fintech-Product-Web-Transition

Above: A similar transition for maintaining user focus on content. Rather than eliminating content as in the previous example, this example adds content while maintaining context.

Travitor online learning platform – Admin dashboard, George Kvasnikov for Fantasy, https://dribbble.com/shots/3515460-Travitor-online-learning-platform-Admin-dashboard

Above: This design features content and scroll transitions that make information and content groupings easy to digest. Consider card and page animations to help users understand groupings of content.

Sign In Button and Form Animation, Hima Vincent, https://codemyui.com/sign-in-button-and-form-animation/

 

Writer Prototype, https://dribbble.com/shots/3046893-Writer-Prototype

Above: Help users focus their attention by minimizing forms and other interactive features when possible and highlighting desired actions, buttons and/or menus.

The Best Friend: Conversational UI – Blended UI

This partner may not always have the right answer, but the Conversational User Interface (CUI) or Blended UI is always there to listen and lend a hand.

Make it Meaningful:

Getting started with the CUI may seem a little intimidating, but consider acting on some more straight-forward applications of the CUI, such as basic integration with Search or a Welcome greeting after signing in. Here are some examples of both straight-forward and more complex applications.

Sketch bot – Amplify, Julia Laza for Redmadrobot, https://dribbble.com/shots/4035384-Sketch-bot-AImplify
Wonderland Contact Page Sneak Preview, Wonderland, https://dribbble.com/shots/3397279-Sneak-Preview-of-our-new-contact-page

 

Quad Dashboard, Steven Hanley for Handsome, https://dribbble.com/shots/3994874-Quad-Dashboard-Interaction

 

Technology Imitates Art, Written by Paul Campillo Designed by Iker Fernández & Sevkan Ariburnu Developed by Jepser Bernardino, https://www.typeform.com/blog/human-experience/cui/

 

The Rebel: Animated GIFs and CSS Animations

GIFs can have a bad reputation for distracting users and in general not adding value to an experience. CSS animations can sometimes be misused as well. But, these two are often misunderstood and with some care can help your product shine.

Make it Meaningful:

Here are some examples of how to use GIFs and CSS animations to your product in a meaningful way

Facebook GIF Profiles Facebook

Above: Use Animated GIFs for profile images. Think of the magic of Harry Potter and how greater context can be given to a User’s role within an organization and/or help colleagues and customers create a greater connection with the user.

 

The Pudding Website, https://pudding.cool/

The Pudding features portions of their work on hover to help users understand what to expect if they click the associated link. This is a great example of user feedback. Consider using animated GIFs as a tool for Information or Tutorial Links and/or to help users take their next step in a journey.

 

Consider using animated GIF icons to help users understand the purpose of an icon or draw their attention to an important action.

 


Hooray Message on Button Click Animation, Hima Vincent, https://codemyui.com/hooray-message-button-click-animation/


Send Button, https://dribbble.com/shots/3071328-Send-Button

Submit To Tick Button Animation, Hima Vincent, https://codemyui.com/submit-to-tick-button-animation/

 

CSS Button Animations that offer feedback to the user can engage the user by helping them feel connected to the product brand, purpose and active task. Interactions should, as much as possible, offer users input as to the status of a request.

The Nurturer: Emotional Experience – Get Feedback

B2C companies are pushing forward with tools that permit users to share their emotions or reactions in a user-centered, meaningful way. So, why not integrate this into B2B products?

Make it Meaningful:

Businesses can gain insight from Reaction tools by adding them to FAQ pages, Support interactions, forms, product templates and other areas of value.

Visual & Interaction Exploration –Reacting to Content, Samuel Medvedowsky for MetaLab, https://dribbble.com/shots/3363902-Visual-Interaction-exploration-Reacting-to-content

 

Feelbacks Reaction Tool, Vicomi, http://www.vicomi.com/products/feelbacks/

 

Pure CSS Facebook Emoji Reactions, Hima Vincent, https://codemyui.com/pure-css-facebook-emoji-reactions/

 

This Valentine’s Day, remember that partnering up with some of these design tools can help add some magic to your product experience.

Also Read: 2018 Design Trends

More from this author

Amanda Morgan

UI Designer

Amanda Morgan
Amanda Morgan

Amanda Morgan

UI Designer

More from this author

Watch Highlight Reels

Find out how Truthlab can shed light on the customer experience with the truth quotient.

Customer Experience Update