-1

I have a wireframe for a chatbot that includes a web form with multiple choice (radio selection). It's essentially a quiz; the chatbot asks a question with one possible response, then, after submitting, the user gets feedback on "correct/incorrect".

My biggest unknown is how the interaction should behave after the response is given

A-Simulate a conversation? screenshot of the wireframe A The form is rendered, making the choices disappear, and having the response as if it was coming from the person/user?


B-Behave like a classical quiz webform? screenshot of the wireframe B The user interacts directly with the form and the feedback is given directly


C-Hybrid of 1 and 2? screenshot of the wireframe C

Design goals: accessibility, reducing noise without affecting usability

1 Answer 1

0

I find the three options very confusing, mainly because it is not entirely clear who is acting at each moment. In design classes, when a student tries to make an icon of an animal they always start with the image they have in their mind without even looking at a photo or studying what kind of animal it is. Well, the same thing here, I think you're trying to make up a chat conversation without going to the origin of how it develops.

I would start by studying well the layout of a chat to better understand which option to choose.


In a chat there is a well-defined area for the activity of each participant, generally on the right for the sender and on the right for the recipient (except for typing which is the total width for both):

enter image description here

In the case of the question, there is an extra addition which is the interactivity on the answer. In the three examples in images of the question, the user is being forced to leave his area to interact by invading the recipient's field, which is perceptually confusing in my opinion:

enter image description here

In the first place, I would look for a type of layout so that this dividing axis of interactivity is not broken, constantly maintaining the essential partition of a chat: me on the right, you on the left.

enter image description here

Regarding the question, in the first part of this answer, it is clear the only field of interactivity in a chat is the use of the entire width of the screen to type, I would use this to create the interactivity, removing the confusing radio buttons. For example, transforming each answer into a clickable button with state changes to hover and selected, clarification at the bottom of the type of interactivity if necessary, and accepting or rejecting the answer in the conversation bubble:

anser buttons

hover

selected

3
  • Thanks! I have seen this in chat UIs before with one click only. But this is a radio selection changed to look like a button switch. It is still invading the bot space. My question was more on the mental model for feedback after submission, whether it should mimic a conversation chickenwingscomics.com/wp-content/uploads/2018/09/… or behave like a web form? The con of the latter is that it breaks the illusion of chat, while its advantage is that it reduces history (information to process). Do you have any HCI literature on this? Commented May 14, 2023 at 23:42
  • Sorry, the purpose of comments is not to generate new questions. If you have another question, use the system created for the site 😉
    – Danielillo
    Commented May 15, 2023 at 0:11
  • That's not a new question, you gave feedback on something else (visual aspect of radio), not the question itself (response after submission) Commented May 15, 2023 at 0:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.