Mobile app version of vmapp.org
Login or Join
Annie732

: Is there a standard design for adding(editing)/removing/reloading a file? I am building application that stores pictures of my friends in a database. Each friend has exactly one picture of himself

@Annie732

Posted in: #BestPractice #DesignPrinciples #InterfaceDesign #UserExperience

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:



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:



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.

QUESTIONS:


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)?

10.01% popularity Vote Up Vote Down


Login to follow query

More posts by @Annie732

1 Comments

Sorted by latest first Latest Oldest Best

 

@Cugini998

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".



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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme