Skip to main content

Hi,


I am wondering about the best way to execute this. Any advice is appreciated.




  1. Users will see the information on form (A), user selects an item in the table and continues to complete the form answering all the questions below the table.




  2. Users complete the form with some different questions (B), without the table in (A).




  3. Users completing (A) should be able to change to from (A) > (B) as the wish.




Basically, a user can close the info in the red box in (A) and show a new set of questions in the red box (B) while keeping all elements on the page above and below these the same.


What is the best way to execute this?


Thanks, hope my explanation is ok!!!


Screenshot 2023-04-03 at 11.12.25

Hey! Clarification: are you asking how to do this in design? Or are you asking about the interactivity part in prototyping?

Hi @Yehia, thanks for your response.


I am asking about the interactivity/what type of component/system/element would be best suited for this kind of interactivity 🙂

@damo you are asking a UX question, which would have many different answers that really depend a lot on the context of this form. You are using placeholder text which makes it even harder to understand what the form is about. But from what I gathered I can only say the following tips:



  1. It is generally not a good UX practice to hide/show content of a page based on a the user answer, this makes the page move needlessly and hides content unnecessarily.

  2. The use of vertical space in your form is not optimal. A lot of these Yes/No questions can be easily put in a radio/toggle box in one simple line.

  3. If the form is complex enough, perhaps you should consider using funnels, example of this is Material Design Steppers guide.

Thanks for the feedback Yehia. You gave me some good advice. Thanks.

I implemented the radio/toggle suggestion and it looks much better!

Reply


Terms & ConditionsCookie settings