Answered

a Dropdown menu situation

  • 1 February 2023
  • 6 replies
  • 46 views

Userlevel 1
Badge +1

Hello,

We use the Typeform for getting feedback about social workshops for elementary school kids. One of the questions is what school do you go to? and then there is a dropdown list of 4217 schools… a lot… 

Problem is, when the kids open the dropdown menu, the typing frame/line is located at the top of the screen, so they do not notice it. Instead of typing and getting help navigating to their school’s name, they scroll down hundreds of names, then give up and randomly choose a name- which of course doesn’t serve our statistics.

I would like to please point out that a design problem exists on that specific screen, and that it should be designed to stress out the typing and not the scrolling. The typing line/frame literally camouflages at the top, and this is the stage in the questionnaire when we get so many misunderstandings, confusion and mistakes.

 

How can I please forward it to Typeform user experience professionals?

 

Thank you :)

icon

Best answer by jeremielp 22 March 2023, 14:16

View original

6 replies

Userlevel 1
Badge +1

I have the same problem. The design of the dropdown menu is not user friendly, it is hard to notice the line where you suppose to type in, and it shows the list in the middle of the screen instead of the typing line, what makes users to scroll instead of typing in, After few scrolling they get tired and just chose a random option. There’s an easy way to fix it, please do 🙏🏽

Userlevel 7
Badge +5

Hi @Leora Thanks for stopping by! Do you mind sharing a screenshot of the issue and/or the URL where the form is located? Thanks in advance!

Userlevel 7
Badge +5

Hey @Leora how’s it going? Don’t forget to share a screenshot or URL so we can take a look at this for you 🙏

Userlevel 1
Badge +1

Heyyy thank you, here I made a video showing the problem

 

Starts at 2:40 min

Userlevel 5
Badge +5

I am not going to comment on the Typeform UI, but here are some suggestions:

Regarding the progress bar: even if you make it bigger, kids may still not understand what it means, as they have not been exposed to this type of UI. What you can do, is disable Typeform question number, and replace them with 1/4, 2/4, 3/4 at the beginning of your questions, which may be easier for them to understand. You could also have an intro message that tells them about the progress bar and arrows, so that they understand better the logic.

Regarding the dropdown with all the schools, an idea could be to ask them for their city (I think you mention it). Then, based on their city, only show the schools within this city, or within a certain distance of the city. This means more logic to implement on your side, but a better user experience for the kids.

If you have a business account, there is a way to load a CSS through the GTM pixel integration. Have in mind though that it may break in case Typeform makes an update later.

Userlevel 7
Badge +5

Hi @Leora did the suggestions above help? 

Reply