Breeding Faster Horses
Tags: webdev, ux, uxdesign
Published: 2024-05-01 05:50:31

The above is a part of a Henry Ford quote, and the whole quote goes as follows; _"If I was was to give people what they wanted, I would have been breeding faster horses."_

There's a lot to be said about Henry Ford, a lot of it is negative too - But he knew how to innovate. The T-Ford was arguably a revolution in its time, and I would claim most car manufacturers today aren't even close to the quality he created with the T-Ford 100 years ago.

## How horses relates to AI chatbots

My reasons for writing this blog is because of skewed expectations related to how an AI chatbot should look like. But before I tell you how it should look, let's have a look at peoples' expectations. Below is one of our competitors, paradoxically one of our better competitors.

The following is an AI chatbot you've probably seen a million times, similar to practically every single chatbot that was ever created. However, I will make an argument in favour of that it's _"a faster horse,"_ and hopefully you'll agree with me once you're done reading the article.

<img alt="A competitor's AI chatbot" src="https://ainiro.io/assets/images/blog/the-other-ai-chatbot.png" style="max-width: 400px;margin-left: auto;margin-right: auto;">

## What's wrong with it?

According to the Baymard Institute the optimal character count per line [is between 50 and 75](https://baymard.com/blog/line-length-readability). The above chatbot has on average 25 characters per line. This results in that your eyes hurts as you read due to too much jumping back and forth, and it's difficult to keep the context of sentences. In addition, the font size is 14 pixels, which becomes painful especially on phones, but also on desktop due to modern computer resolutions.

I want to emphasise that these are objective truths, and we've got science to back this up. This isn't something I'm making up as I go along.

The font-size of the textbox is 16 pixels, which implies it will not zoom in on iPhones, which is a good thing - And the font family isn't too bad, considering they're using font-size 14 for its output. But in general, on readability it scores maybe 2 out of 10 because it relies upon peoples' expectations instead of innovating, implying they're _"breeding faster horses."_ The only reason they're not scoring 1 on readbility is because at least they're not using serif fonts, which is something at least - Since with font size 14 serif fonts would be impossible to read ...

When you open the chatbot, it does not prevent page scrolling. On phones especially, but also on Mac OS X this makes it very painful to scroll, simply because as you scroll to the bottom or the top of the chat output, the page will start scrolling. And if you try to scroll the page itself, but you've got your cursor inside the chatbot itself, it will not scroll the page but rather the chatbot.

This creates _"cognitive noise"_ for your brain, making it more difficult to stay focused, on both the page and the chatbot output itself. So not only is it impossible to read the chatbot while scrolling, but it's also impossible to read the page itself while scrolling. Implying as you open the chatbot, because of the chatbot's fear of _"destroying the page experience"_, it destroys _both_ the page experience _and_ the chatbot experience.

Our philosophy here is that we do not destroy the page experience unless the chatbot is active, which you can see from us not adding anything but the button itself obstructing the page experience - While not allowing the page to destroy the chatbot experience while the chatbot is active. The other chatbot destroys the page experience by adding too much UI when it's not active, while also destroying the chatbot experience when it is active by not adding a backdrop or preventing scrolling. So basically, with the other chatbot, everything is always destroyed.

There is also no backdrop behind it, which results in that you are distracted by page elements as you read the chat output. The correct way to open up a chatbot is by using a backdrop, since it eliminates cognitive noise from the page it is embedded on. Modal dialogues and windows are some times an _"anti pattern"_ on the web, but when it comes to AI chatbots it is definitely a good thing. Basically, when the user opens up an AI chatbot, this is an opportunity to convert a lead into a paying client, and you do _not_ want any distractions making it more difficult for the lead to becoming a client. So a backdrop is kind of a must have thing at this point.

However, some websites are clean enough to handle an AI chatbot without a backdrop, so we've got one theme without a backdrop for such clients.

In addition the chatbot has practically no margin between the text and the end of the _"bubble"_. This is the equivalent of reading a book where all the characters are clinging to the edge of the paper, something we've known for more than 1,000 years is a _bad thing_. Don't believe me? Check out this 500 year old text by Gutenberg, and how it's got _a lot_ of margin around the text itself. We knew about margins 1,000 years ago, and still 99.99% of modern AI chatbot providers are doing it wrong ...

<img alt="A competitor's AI chatbot" src="https://ainiro.io/assets/images/blog/gutenbergbible.jpeg" style="max-width: 750px;margin-left: auto;margin-right: auto;">

The last element they're doing wrong is the order of their buttons. The submit button should be as close to the textbox input field as possible, simply because this makes it easier to use the thing. They failed here too ...

In addition to the above elements, they don't keep the context if you click links, and/or refresh the page. Our AI chatbot will keep the context for each session, and only as the user _leaves_ the page will it start a new session. This allows users to visit different pages on your site, while still continuing chatting with the AI chatbot - Similarly to how a sales clerk will remember you even if you go to look at another item in the same shop.

For an AI chatbot that is also being used as a navigation element on your page, the last point is crucial.

## They did nothing wrong

In case you haven't guessed it already, the above AI chatbot is basically every single chatbot you have ever seen. Its design is _"the middle of the road solution"_, and it could have been the UI from a million different chatbot vendors. Let me show you a video illustrating why that's a bad thing ...

{% embed https://www.youtube.com/watch?v=eywi0h_Y5_U %}

Notice how Steve Ballmer says; _"It doesn't have a keyboard so it won't appeal to business customers."_ Let me ask you two questions;

1. Do you have an iPhone?
2. Do you use it for business?

The funny thing is that technically Steve Ballmer was correct. When the iPhone came out, there already existed 1,000+ smart phones. Of course barely anyone know about these today, because practically nobody wanted them - But I used to own one myself, and believe me when I tell you; __I do _not_ miss the keyboard__!

* Steve Ballmer was a _"breeding faster horses"_ type of guy
* Steve Jobs was a _"T-Ford"_ type of guy

I have seen a million chatbots like the one above, no margin, small fonts, to few characters per line, wrong order of buttons, etc, etc, etc. Just because everybody else is doing something doesn't make it right.

## We try not to breed faster horses

Look at our UI and UX, and realise we're violating every single _"best practice"_ that exists in the world when it comes to AI chatbots, and we're _proud_ of that.

<img alt="Our AI chatbot" src="https://ainiro.io/assets/images/blog/our-ai-chatbot.png" style="max-width: 750px;margin-left: auto;margin-right: auto;">

First of all we've got 80 characters per line. This is slightly above the 75 declared perfect by the Baymard Institute, but still creates far superior readability than 25 such as the above _"middle of the road solutions"_. In addition, when the chatbot is opened, we make it _big_, we make it _really, really, really big_ in fact. Our reasons are because when people click the button and opens the AI chatbot, they're telling you something, and that something is as follows ...

> I am interested in what your company has to offer

And at that point, a kick ass AI chatbot can ensure that they convert. The backend is in fact explicitly built with every single psychological method we know about to help convert the client. Hence, we will at that point do everything we can to _"keep the user's focus"_ inside the AI chatbot, until he converts into a paying client.

There might be an argument towards making the background non-transparent, but that's another theme for us, and not a re-design of its UI. If you want an opaque background, we've got one, and for some sites, especially sites with a lot of moving images and videos in the background, that makes sense.

There are also some websites that are so clean that the chatbot doesn't need a backdrop, yet again, another theme for us.

In addition, the sheer size of the chatbot allows us to spend a lot of real estate on margins. This is called _"Scandinavian design"_, and is proven to make it easier for readers to focus. If you look at the above answer from _"Frank"_, you will see there's a lot of room between the text and the border of the bubble. This makes it easier to read, and is simply considered superior design, using nothing but neutral science.

The other chatbot further up has the text clinging to the edge of its bubble, something I'm sure you can easily see if I repeat the image once more.

<img alt="A competitor's AI chatbot" src="https://ainiro.io/assets/images/blog/the-other-ai-chatbot.png" style="max-width: 400px;margin-left: auto;margin-right: auto;">

This creates more _"cognitive noise"_, especially since the background color of the bubble is different than the background color of the chatbot itself. It further reduces readability. To understand why, imagine a book without margins on its pages - How would reading such a book feel like?

> The research on this is actually 1,000 years old, implying more margins makes for better readability

Johannes Gutenberg was using large margins because of these same reasons.

In addition, to the right of our chatbot is the _"send button"_. If you look carefully at our competitor's chatbot, you will find two other buttons before you find the send button. This is simply terrible UX, because it forces the user to _"think"_ before he finds it and can click it, not to forget that these buttons are so small, they would be almost impossible to click on a phone. The absolutely most important UI and UX concept ever created can be encapsulated in the following sentence.

> Don't make me think!

And the second most important could be argued is; _"Don't make me use my pinkie on my phone when I could have used my thumb"_ ...

In fact, I wouldn't be surprised if the other guy's design originates from the time we used a stylus on our phones, making it _possible_ to actually click the thing. Then it just _"got stuck"_ because nobody wanted to stand out ...

## Conclusion

The competitor from above is not doing anything wrong. They're just building the same chatbot we've seen a bajillion times, while we on the other hand are breaking all the rules. However, there's a reason _why_ we are breaking the rules, instead of just pushing out whatever everybody else is pushing out - And that reason is as follows ...

> We don't breed faster horses

When that is said, we _can_ deliver AI chatbots that resembles the above 100%, we just don't like to do it, and when we do, we will remove the watermark to AINIRO, because we simply don't want people knowing that we delivered it - The same way I'm sure Henry Ford sold a couple of horses too during his life time, without labelling them as T-Ford ...

However, ask yourself the following two questions.

1. Do you want such a chatbot because everybody else has one like it?
2. Or do you want such an AI chatbot because you believe it's better?

If your answer is number one, that's an honest answer, and a legitimate answer too, since people _do_ have expectations to AI chatbots and how they should look like, and we are violating these expectations - And not violating expectations might be better some times.

However, if your answer is number two, then science tells us that you're wrong, and it's not about subjective truth, it's about objective truth, research, and science - Some of which is 1,000+ years old ...

Thx for reading. Now you know why our chatbot looks like it does. Hopefully knowing why might open a couple of eyes ... 😊