[Meta] - UX / Design Conversational Interface

Hello,

I'm currently working in the high-fidelity wireframes for desktop and mobile. The issue status is very advanced but not finished.

You can check the design in the following Figma File: Conversational AI Interface

Current status

The current wireframes had the idea to introduce the chatbot as a button in the side admin navigation, which when opened pushed down the rest of the menu items and allowed for the chatbot to exist on the page without having to take up any extra real estate on the screen (which also did not cover the content on the page).

However, we have heard from the Gin team that moving forward, the navigation bar is not planned to be around for very long, or rather mostly hidden with emphasis on the top bar for tools and actions - which breaks the idea above as the chatbot needs to always be standing out and not tucked away with the rest of the navigation.

As for now, as also suggested by the Gin team, it is best if the AI Chatbot button lives somewhere in the top bar on the far left side, similar to the current implementation in Experience Builder, to provide the most similar feeling. This would be somewhere where currently the breadcrumbs are present, or as in the wireframe, the "Take a tour" button, although it will mostly be a space for tools in the future.
As for the chatbot placement itself, this is still to be tried out and discussed, but once again staying similar to the XB experience, the top candidate is having the chatbot grow from the left of the screen - pushing the entire page to the right. Although there are some concerns if this is not too heavy on browser resources.

Current Status

Following up from last week's meeting where we got a pretty clear idea on how to move forward, we have created a small demo with the following suggestions that align best with Gin's ideas moving forward, and also provides a similar experience to Experience Builder in terms of design for a very nice consistency across both:

• - Do not place any AI related functionality on the side navigation itself, this will eventually be 'hidden' in Gin, which we do not want since we want to really show off the AI button and functionalities
• - Place the AI Chatbot button in the top left of the toolbar, this will be the designated spot for Tools in Gin and also follows what XB is also doing
• - Have the Chatbot itself 'slide' out from the left of the screen, pushing the rest of the page to the right (Not overlayed). This allows us to not have to occupy any existing real-estate within menus or sections of the page, and also not have to overlay any content - This was important as in the future it is planned for the chatbot to provide real times changes occurring on the page which should be visible to the user. There were concerns if this will impact performance since we would be moving content and admin menus, but this so far seems to not be the case.

There was also the suggestion that the chatbot should remember its opened state, this to ensure consistency in the case that the Chatbot takes you elsewhere, or you are navigating around the site with the Chatbot already opened

Here is the current look of the demo presented in the AI alignment meeting with the changes above taken into account. I have also attached a video with the opening and closing animations and message design:

However, there are still some more things left to discuss:

How should this best be shown on mobile? The most popular idea in the alignment meeting was for the AI Chatbot to take up the entire screen when opened, but instead of sliding from the left, to be draggable from bottom/top. This allows for an easy hiding/showing of the rest of the content on the page.

How should we best label the Assistant button? This will also impact how users will refer to the AI assistant itself. Currently it is just 'Assistant', maybe that is fine.

Nice! I like this, and it aligns with the placement of the AI chatbot in XB 👍

This looks awesome