1

I ran a usability test where I discovered that some users failed to initially notice the iOS picker. I’ve included a link below to a short clip where a tester didn’t notice the picker and instead expected a drop-down as one would encounter on desktop. We had a couple of testers on iOS struggle to identify the picker which can be seen in this short clip.

Does anyone know of any best practices to deal with this issue? Are there generally accepted ways we can get users to immediately notice the picker?

1

Based off of the clip, I would suggest closing the selector if it is open and the user clicks again.

In doing this, it would give your users some kind of visual feedback. This would lead them to explore and see what changes, which would then help them notice the iOS selector at the bottom of the screen.

1

This isn't necessarily your responsibility. This is Jony Ive's responsibility now. You're using a native element and we can really only assume that the person is somewhat familiar with the device they are using.

Do you know if the person performing the task regularly uses an iPhone? Were they testing on an actual iPhone or an emulator?

About the only thing I think you could do would be to somehow give the drop down an 'on' state of some sort to indicate that SOMETHING has happened. Maybe give it some color and remove the down-caret while active.

1

It's hard to analyze the full interaction because the clip doesn't show how the selector showed up (did it slide in? load with the page? appear after user clicked on the dropdown control at the top?)

Based on the very limited clip:

  • The page locks in the user's attention. The user is focused on the top where you have the Please select control and instructions wrapped in an island (thin border), so the user has no reason to leave the island.
  • The workflow starts at the top of the page, then you are expecting the user to move her focus to the bottom to make a selection, then up to the middle to hit Done. This is poor flow design....a top-to-bottom workflow is what most users expect, so in order to communicate your unusual flow you will have to provide clear transitions for the user: slide up the picker, for example.
  • The picker doesn't have a default value. Instead, it repeats the Please select, which is confusing for the user because she has just seen the same text at the top of the form.
  • You have used a gray-on-gray palette for the picker, and users tend not to notice neutral colors. Try using a higher contrast palette.
  • The drop-down widget at the top is an existing idiom where the user expects a list to drop down. Instead, you have a picker. Consider replacing it with a button that causes the picker to slide up, instead of using a drop down.

To fix this properly I think the form needs to be design for better top-down flow. If you need to break the flow to show a large/mobile-friendly modal control like a picker, then use slide-up animation and proper contrast to communicate the transition properly to the user.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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