I am designing an editor. On my UI, there is an icon for importing a file. When user opens the editor and clicks on “Import” icon, that file is opened in editor. Now I want that if user clicks “Import” icon second time, and opens a file, that file must be appended to already opened file. On my UI, currently I’m using single “Import” icon to do this. But I have three options:

  1. If user clicks “Import” icon when a file is already opened, a warning message appears asking user to Import a new file and replace existing one or to append the file to existing one.
  2. Icon for “Import” changes to “Append” icon when at least there is one file already opened.
  3. There can be two separate icons for “Import” and “Append”. When user wants to import a new file and replace existing one, he can click “Import”. And when he wants to append a file to existing one, he can click “Append” icon.

Which option out of these looks better in UI reference? Do let me know if there can be better options for this.

3 Answers 3


I'd say it depends on how much space you have. If you have the space, and opening/appending is an essential part of the functionality of the app, what is the problem with showing two buttons? Buttons don't change a lot in my experience. I see much more disabling of buttons that aren't applicable in a certain context. For instance, the append button should be disabled if no file was open and it would become enabled only once a first file was opened. If space is a really huge issue, then maybe consider flipping the buttons on the fly.

On the topic of warning messages, bear in mind the distinction between the "Save" command and the "Save As" command. The benefit of implementing two commands is that advanced users who know the difference between the two can access them directly (without having annoying warning messages popping up) if they have already made a deliberate choice to do one or the two. Warning messages are fine but if users can't prevent them they become annoying.


Option 1 is better as user can see the changing icon on re-importing/appending the existing file. Having 2 icons on the editor is confusing to the user. what if he clicks the append icon for the first time import? We need to inform the user that he has not imported the file. What if he clicks import icon for appending? We will have to give warning here also. So, i think option 1 is better.


It is perfectly fine to have text with your icons. I would say to label your icons with "Import" and "Append" so there is no confusion.

  • Option 1: It my be fine for the first use to prompt a user like this, but after that the prompt may become irritating and will slow them down.

  • Option 2: If your workflow is such that the user must do one import followed by a lot of appending (i.e. you don't want to give the user the choice of clicking import again), then it might make sense to replace the import icon with append.

  • Option 3: If users will be doing lots of importing and appending, then keep the buttons seperate so they have the choice.

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.