Why use borders around dropdowns in a mobile app?



  • I'm working on a mobile app with a GUI similar to the Gasbuddy mobile app.

    The first screenshot is what Gasbuddy looks like now. The 2nd screenshot is the same thing but without the borders around the dropdowns.

    I may be overthinking, but is there a UX advantage to adding the borders to the dropdowns?

    Also, in mobile apps, are these controls called dropdowns, comboboxes, or is it called something else?

    borders around

    But I've seen apps that use dropdowns similar to the ones below without borders:

    the same with no borders



  • The borders around buttons and call-to-actions provide a much clearer representation of the physical contact/touch point for the user, although generally the user interfaces on mobile is laid out in a much tighter space so it may not matter as much as when you are designer on a desktop for click interactions.

    The combobox is a term used for specific types of dropdown input control that can be combined with other features, such as a search or multiple selection rather than just a simple dropdown list from which you can select one item only. However, depending on the operating system or design framework you use it also might mean different things.

    I think you can keep the function of the dropdowns (or combobox) similar to the app you are trying to mimic, but in terms of the style you should probably consider whether you are also trying to mimic the app or doing something different, in which case the border around the controls might not suit your particular purpose.




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2