I have a dropdown list with data in it, and I want to give to the user the option to refresh the data in the dropdown list after he adds or deletes data from the database.

How should "Refresh data in dropdown list" look and behave in the dropdown environment, I mean where should it be positioned, how the refreshing data should look during loading (not for mobile)?

See attached a demo mockup to a better understanding, with of 2 options that I thought they can solve the issue.

enter image description here

  • What do you mean by "how should it look"? How should the button look? How should the page look while the data is refreshing? How should the indicator showing that the data is refreshing look? Please edit your question with more details.
    – Tot Zam
    Aug 3, 2017 at 19:00
  • I think I understand what you are trying to get at. I would just have a little refresh icon next to the dropdown that can be clicked to update the dropdown to reflect the database changes. Also if you are looking to display whether the dropdown is up to date or not. Maybe place a red x when it goes out of date and place a green check when it is up to date.
    – Nick_M
    Aug 3, 2017 at 19:50
  • 1
    @TotZam thank you for letting me know that the question was not clear enough, I already edited it and added some mock-ups.
    – Feder
    Aug 3, 2017 at 22:12
  • @Feder why the user needs to click on update countries list? why can changes not happen at real time?
    – NB4
    Aug 4, 2017 at 9:03
  • @NB4 Excellent point! Because the data is loaded into a different platform and so if I want to load it in real time, I need to ask from developers to build an action to check if there an updated info every and every second, something that could be expensive to develop and not really necessary.
    – Feder
    Aug 5, 2017 at 21:51

1 Answer 1


How about something like this? Posting a few quick lo-fi mockups as alternatives.


download bmml source – Wireframes created with Balsamiq Mockups

Another (maybe bit more radical option) is to have an "automatic refresh", where the system (e.g. back-end) take care of refreshing the data set and push information to the GUI when the data set has been updated (therefore bypassing the need for a manual refresh).

  • Thank you Andreas! Alt. 1 is one of the concepts I was thinking about. I'm not sure I understood the differences between alt.1 vs alt.2 I added a bit more details in the question and the 2 concepts... the 1st exactly as you offered and the 2nd with the action inside the dropdown list, it means the action will be hidden when the dropdown list is not open. What do you think?
    – Feder
    Aug 3, 2017 at 22:02
  • Hi @Feder , thanks for sharing your design. I think the "outside" option is the clearest one as this option exposes the different actions to the user. When it comes to the label "Update Countries List" I'd simplify. Since the action is already next to "Countries" I think a simple "Refresh" or "Update" would be enough. "List" will be unnecessary detail I believe here. Generally it's good to add for labels with as few words as possible (compare with actions on stackexchange, for instance, many are one-word, e.g. share / edit / delete / flag / help).The difference in option is the bold label btw. Aug 4, 2017 at 7:05
  • I totally agree with you, the reason I thought in this detailed text, "update countries list", is that the dropdown is placed as part a modal (pop-up) with additional components and actions. I definitely will consider your recommendation of a single word action. Thanks!
    – Feder
    Aug 4, 2017 at 7:43

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.