I am building application that stores pictures of my friends in a database.

Each friend has exactly one picture of himself in the database, so there will not be multiple pictures of the same person.

Each action is committed when user presses OK button. This way users have option to correct mistakes.

When performing new entry (adding new picture), user should have following options:

  • upload new file
  • delete file (in case they made an error)

When they work with existing file, users should be able to perform the following actions:

  • replace existing file with new one
  • delete file
  • "reload" existing file from database*
  • export file from database

*In case users overwrote/deleted original file (but then realized their mistake) they are able to "reload" the original file.

After searching here for similar questions, I came to the following implementation for entering new files:

enter image description here

It is pretty much self-explanatory, since this is the method Google and many others use.

When working with existing data, I have a problem. I do not know how to design GUI to take into account conditions I listed before. The best I came up, as an amateur, was this:

enter image description here

This way user can add new file (that should overwrite the old one) with the + button. If user decides it was a mistake, pressing the refresh button can "reload" old file. User can delete file by pressing x. If user decides that deleting is not necessary, pressing refresh button can "reload" old file. Exporting picture form database is done with the bottom-right button.


  • Is there a standard way for dealing with the above described file operations?
  • If not, can you improve on my design (I am software developer, not UX/Graphics designer)?
  • 1
    Hey there! Since your question revolves around layout AND usability, you might get some good answers over on ux.stackexchange.com if no one here chimes in. – Vicki Nov 5 '15 at 0:58
  • 4
    I'm voting to close this question as off-topic because it belongs to another Stack and you might get more pro help there: ux.stackexchange.com – go-junta Nov 5 '15 at 7:34

I've seen some applications and websites do something similar to what you're trying to do, but they don't present as many options at the top-level as you are, which actually makes it easier for the user to make decisions (option shock is a real thing to consider when designing UX).

Something that says "Remove Image" might be better than an "X", it is more explicit. The "X" in the field could communicate "clear the path out of this field", which isn't exactly what you're trying to communicate to your user.

You could also change up your flow a little to reduce the number of decisions the user has to make at the top-level. For both of your use-cases, you could have just the plus button, or maybe just a "..." button that means "Browse".

enter image description here

When the user hits "...", they are taken to a screen or pop-up where they can choose to either upload a new file to the database, use a file that is already in the database, or download one of those files.

enter image description here

  • Thank you for answering. I have upvoted your answer for now. I wonder if I could use trashcan icon instead of words, so I can save some space? Anyway, I see something in your design ( first image) that scares me a little: when user removes the image ( by clicking on "remove image" button) how is he supposed to "undo" the operation in such a way that existing image gets "reloaded"? I apologize if being unclear, English is not my native. P.S. I have tried on UX SE but had no luck. I feel like I ask for impossible, or solution to my problem is so simple that nobody wants to bother... – AlwaysLearningNewStuff Nov 5 '15 at 2:37
  • If I understand correctly how your system works, even if they choose to "remove" the current image, it's still in the database, yes? While I think "undo" is nice-to-have, I don't think it would be expected functionality in this type of interface. If they can still add that same image from the database anyway, undo isn't really necessary. That's just my opinion though. :) – Vicki Nov 5 '15 at 3:05
  • If I understand correctly how your system works, even if they choose to "remove" the current image, it's still in the database, yes? Image stays in database as long as they do not hit Save, after that it is gone. As you have correctly assumed, overwriting existing image or deleting it, just changes the text of the textbox original file hasn't changed. In order to save changes, user must hit Save, otherwise I will not overwrite/delete the old file. I just need a way to offer user to keep the original file in case of mistakenly deleting/editing it. I hope things are clearer now. – AlwaysLearningNewStuff Nov 5 '15 at 3:16
  • If they can still add that same image from the database anyway, undo isn't really necessary. That is true, your solution is very good for that. However, I am making desktop application on Windows, and there is standard dialog box for opening file. It is really a pain to modify it to look and behave like your mockup. Still, I will give it a try... – AlwaysLearningNewStuff Nov 5 '15 at 3:18
  • It's interesting. Most applications I've used that let you assign a profile picture (twitter, instagram, stackoverflow) do not include functionality to let you save what is going to be overwritten. Usually a right-click "save as" (which isn't even always available) is the only way to save what you're about to overwrite. I'm not saying just because other applications do it this way means you should follow suit, but there's something to be said for user expectations. Unless your boss is telling you it's a must-have feature. In which case ignore everything I've said. :) – Vicki Nov 5 '15 at 3:39

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