I wanted to show you guys some interesting chatbot designs I made a couple of days back. I was checking out an album of interesting pop art artwork and tried to use some of those images to make these designs. I think with a lively design like these, the conversation with the bot can be made a lot more interesting and personified. Check these:
What I did was, I started with an image that looked interesting and set it as Chat Background and then tried to pick 2-4 dominant colors from that image and tried a few combination of those colors as Bot message bubble, user message bubble and page body (for desktop view). And kept the one which looked best.
Depending on what the conversation is about, you have to start with a relevant image (with proper aspect ratio) and then follow similar steps to get the rest of the colors for the design. Overall I think this makes the Bot a lot more personified and personal, and users will likely give it more chance to say what it is trying to say.
It’s like putting on a nice set of clothes when meeting someone new, it won’t help you in improving your personality but it will give you more time to communicate your personality to others, since you are so easy and interesting to look at
Let me know what you think about this approach for coming up with a design theme.
PS: The conversations in these bots are just some random messages for testing.
Love it! The image-text blending is great for personalisation!
I would debate though the need for a Modal Screen (with colour and opacity % selectors) that will attenuate the background image intensity thus allowing the conversation to be “in front”.
Opinions?
i was reffering to the colour of the modal screen. Not just % opacity.
I think the modal colour should match the background image also.For example here you have an image with modal screen white and opacity 90% (an example) :
Very dynamic! Three and five from the top are my favorite. For me, if the button options blend into the background color on the edges, it loses the effect. But when they are clearly placed behind a different color on the background and the edges of the picture match, but do not intrude, it really draws your eyes to the buttons, which is great for initial interaction and eventual conversion. I was waiting for the design aspect to allow background images ever since I spotted one of the early demo bots with it. I knew it was only a matter of time. This shows a true artistic value in that feature.
Yeah, some good points for figuring out the right contrast for buttons and bubbles against the background image with different color placement. BTW, try using a gif in background. Although not always good for conversion, as it is quite distracting, but still looks pretty cool.
We are actually thinking one step ahead, something for the future, where you can change the design of the Bot in a dynamic way on a per gambit basis. So that when the conversation moves on to some other topic, the background image (and even colors) can be changed accordingly to give a visual queues.
I was going to mention that, but I figured you already had something in the works because of the “fashion show” bot you made to introduce the design option. I think it would be really fun to have themed backgrounds run through different conversation flows. Like breadcrumbs on websites but much more visual!
Using background on a per gambit feature could allow for an interesting use of gifs that are timed with your text, so when the options pop up the gif transitions to another photo (say after 4 seconds). That could be really interesting project to tinker with!
These designs look really sharp! I think these are great options for people because they look really interesting for users.
Personally, I’m not sure I would use them since my bot has a lot of images in the chat, but I would like to be able to put a picture on the background (behind the chat box).
