2

I've done some research on this and so far I can only find guidance for files and tabs:

Denoting a tab as being "unsaved" in a web application

Is there a better character than the asterisk to indicate a modified document?

However i feel my problem is different.

Here is an example of my configuration page. The user is able to upload 3 different files, for each upload they will need to click upload.

enter image description here

The user may also wish to view the content of the file before it is saved by clicking 'show current'.

Once the user has uploaded a new file but NOT clicked submit I want to show them that there are pending changes to be submitted

Question: How do i show this to the user? My research says I should use a red asterisk, however, on a webform, this normally means a required field.

The options i've though of so far are below:

enter image description here

1

The workflow here is not as intuitive as it could be.

Try listing out the exiting files with buttons for viewing and replacing

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Clicking the 'View' button would open the file for viewing/checking and clicking the 'Replace' button would open an 'Upload' dialogue to get the new file's location

mockup

download bmml source

Files that have been replaced could then be shown as 'New' rather than 'unsaved changes'. As the files haven't actually been uploaded yet, you could also offer a 'Revert' button here to enable the user to roll back changed files.

mockup

download bmml source

Clicking 'Submit' finally commits the selected new files to replace the existing ones.

This feels a little more intuitive to me and includes plenty of points for a sanity check to lower the chances of the wrong file being replaced.

The upload dialogue can also be used for adding new files to the list.

Lastly, it may be a good idea to include a 'Cancel' button along side the 'Submit' so that users who have wandered in there by mistake can get out safely without causing any damage.

  • Thanks for the advice, this seems like a good workflow that I'm going to introduce to the design. the only thing I might change on your last diagram is have the three buttons visible (Revert / View / Replace). I really like the idea of showing them as 'new' and I see you've added an icon next to them. What would you use for the icon? – Mr Giggles Feb 3 '17 at 13:22
  • @MrGiggles, As long as you disable the 'Revert' button for files that aren't new that should be OK - In fact I can see now that it might be a problem if you had the 'Revert' buttons in the place of the 'View' buttons. As for icons, it depends on the style of your existing visual language and that's more a question of visual design than UX, anything that you feel signifies 'New' and is within the visual language for your product: Gold stars, the word "New", a green '!', it all depends on your particular style. – Andrew Martin Feb 3 '17 at 14:18
  • Thanks Andrew for the advice. I've got enough to present a vision for the user journey of this page now which feels a lot cleaner and understandable . – Mr Giggles Feb 3 '17 at 16:55
1

Indication of asterisk totally changes the meaning to MANDATORY. so avoid using that in any case. rather going for this kind of approach you can try something like the one in the attachment.Saample of wireframe

----EDIT and upload options can be shown on hover over the file.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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