I'm tasked with redoing part of the UI in one of our desktop applications. I've specifically been asked to replace a "Load" button with an icon. Are there any conventions for this style of icon? Unfortunately, it's not a straightforward "open file" button, so the standard Windows icon won't work here (and would be confusing, as one of those icons already exists in the same space).

Load button

The load button (pictured above) shows a dialog to the user prompting for a source, then loads a list of things from the datasource (either a database or a file of some sort) into the combobox to its right (which then becomes active).

The button can be clicked again, allowing the user to re-load different information into the combobox.

We were thinking of perhaps going with the recycle icon, but that isn't intuitive in terms of communicating that it also functions as the initial load (as well as reload). We were also considering some sort of arrow, but we're not sure how well that would represent "loading".

One thing to note is that the button could be relocated to the right side of the combobox if that is a better design. The UI contains multiple instances of this button-combobox pattern.

And also, just to clarify: this is a desktop app, so no uploading is required (the file / database is already on disk).

[EDIT] If there is no convention for the load icon, what would you suggest?

What happens when the user clicks load:

The user clicks Load. A dialog opens, asking the user for details about the datasource from which to load (database, file, etc.). When the user clicks OK on the dialog box, the program reads the data from the source and populates the combobox. For more information about how the combobox is used, see my other recent question.

The combobox looks like this after the data is loaded & it is enabled:

After load

  • 1
    I'm a little confused, does clicking load, load a file into the combo-box or from it? Are they selecting a file from the combo-box, clicking load, and that displays something from the file in another area? What would be a user case? – Taj Moore Dec 30 '11 at 19:33
  • @tajmo Clicking Load loads data from a file into the combobox. I've edited the question to address your questions. – NickAldwin Dec 30 '11 at 19:37
  • What happens if I click the combo-box with nothing in it? The down arrow suggests it's a drop-down; would it contain the same list as I might find after clicking Load? – Taj Moore Dec 30 '11 at 22:28
  • @tajmo The combo box is disabled with nothing in it (that's why it's grayed out) – NickAldwin Dec 30 '11 at 22:43
  • 1

You could combine the following concepts into something like the graphic below

  • the rectangle shape of a button
  • an arrow to the right as if to transfer something from one place to another
  • identify with the dropdown arrow at the right hand side of the combo box
  • make the button the same height as the combobox
  • separate the arrow as figure and the button-ey combobox-ey bit as ground
  • make the outline a single line to show connectedness and relationship

The idea being that pressing the button/symbol is all about loading or instantiating the combobox with something.

enter image description here

| improve this answer | |
  • Hmm, I like this concept... – NickAldwin Dec 30 '11 at 21:30
  • 1
    When I see a small downward triangle/arrow I immediately assume it's a drop-down button and something will appear when I click it. I would not guess this button meant "load a source for the drop-down". – dnbrv Dec 30 '11 at 22:06
  • @dnbrv What about the same icon without the downward triangle? (Also, only being half-serious: if it gets them to click it...) – NickAldwin Dec 30 '11 at 22:55
  • Without the downward triangle it feels like a building exit sign or just a pointer. Though in all seriousness, any semi-intelligent person should try the button when it's close to an inactive drop-down list. – dnbrv Dec 30 '11 at 23:03

Icon would be a bad choice for such a workflow because "loading" is a process that doesn't evoke a clear universal visual association. In addition, the button calls a dialogue window so it has to indicate that, which is currently conventionally accomplished with ellipsis.

I would rather focus on the word choice for the label (Load/Source/Load Source/Add Source/List Source) to make sure users understand what they are loading exactly.

| improve this answer | |
  • I've been tasked with replacing it with an icon because the button is deemed to be taking up too much space. – NickAldwin Dec 30 '11 at 19:44
  • 3
    Interface clarity sometimes requires sacrifices in space. If it's absolutely imperative to do away with text, the icon choices are: ellipsis (just to signify dialogue) and "open folder" icon (which is somewhat misleading but will get the job done). Though any icon still requires a clear tooltip text. – dnbrv Dec 30 '11 at 19:52
  • 2
    I agree, but sometimes such things are not always up to me. And it certainly will have clear tooltip text. – NickAldwin Dec 30 '11 at 19:58
  • Also, see my comment on Tony's answer about my hesitation in using the open folder icon. – NickAldwin Dec 30 '11 at 22:55

Right now, your button says "Load...", you could try just using "..." instead of the text. The recycle, or refresh icon would work, too.

But that's based on a requirement that you have to have the button or icon there.

I would prefer to just get rid of the button entirely, enable the dropdown box, and when the user clicks the dropdown button or enters the control, go fetch the data. If it takes more than a few milliseconds, display a "loading..." text in the control until it's all there.

Your "Load..." convention sounds like it could also be replaced with the standard exclamation point, which basically means "run", or since the user is selecting criteria for data, it's almost like a "filter".

Some examples (from Microsoft Office):

enter image description here

| improve this answer | |
  • The button says "Load...", not "Loading...". That aside, unfortunately I can't load completely in the background, as a dialog must be shown to the user, prompting for details about what to load from. – NickAldwin Dec 30 '11 at 20:05
  • @NickAldwin Updated answer. – LarsTech Dec 30 '11 at 21:52
  • It's not really filtering, just loading in data from one of several source options... – NickAldwin Dec 30 '11 at 22:48
  • Also, this isn't an imperative step in the application (it's a tool that can be used optionally), so I'm thinking the exclamation mark is a little too demanding. – NickAldwin Dec 30 '11 at 23:15

Tricky because as you said this isnt something that is standardisered. Therefore using only an icon and no label makes it harder for the user to figure it what it does out, by just looking at it for a second. But I think of the Open file icon. That is actually what the user does even if its all take place inside the application.

| improve this answer | |
  • My reservations with using the open file icon are that a)there's already an open file icon on the same screen b)the opened source is either a database or a file c)it's loading certain information from the file, but not the entirety of the file – NickAldwin Dec 30 '11 at 19:46
  • Point a) is the main no-go here. Point b) doesn't matter (generic MSFT 'open' action icon is a folder). And for c), users don't really care how much is read from the file as long as they know what kind of file they need to open to complete the task successfully. – dnbrv Dec 30 '11 at 23:10
  • Good points from the two of you. I still think there will be more confusion with no label and only an icon. – Tony Bolero Jan 4 '12 at 21:54

enter image description here

| improve this answer | |

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