Suggested UX Tweak: SurveyMonkey.com Image File Upload (before and after mockups included)
Unclear image upload UI elements on SurveyMonkey Form Designer, which maybe prone to user error.
Simple redesign of UI elements to make it more consistent and less confusing.
I have been using Surveymonkey.com for years and it’s a great tool. I noticed today while creating a user survey that the image upload form in the survey design tool on their website could be improved with a few small tweaks.
Really, I clicked on something that wasn’t a button and wanted to fix it.
Lets look at the current modal window in question from SurveyMonkey.
(I have added arrows to highlight two key points on the image.)
Issues to address:
- The Cancel button (lower orange arrow) looks similar to JPG GIF PNG text (upper orange arrow) onscreen, despite one being a button and the other not.
- The upload a file from your computer link (blue arrow), is displayed in small grey text (why not at least make it blue?).
Why did they design it this way? Maybe it’s following some internal design guidelines, maybe they really wanted white text for the JPG GIF PNG text and on the current modal background the contrast was too low (it is, I tried). To me, the JPG GIF PNG text look very similar to the Cancel button, simply with inverted colours.
After a few tweaks:
I have replaced the “fake” buttons from the modal window and replaced them with second level / tier text. Then I used another text label to provide the user with an obvious decision point.
It is now pretty clear there are three basic options a user can perform from this tab in the modal window: drag and drop to upload a file, click the Choose File button to upload a file, or click the Cancel button.
(Note: the Choose File button could look more like the Cancel button or vice versa, for illustrative purposes only. Made in Sketch).
I also decided to make the Choose File button at least 44 pixels tall, as is recommended for any situation you think someone might be using a touch based device (basically every Windows 10 laptop / tablet).
I would also be very interested to know the statistics on the usage of the drag and drop upload feature versus the Upload a file from your computer link currently on SurveyMonkey. Perhaps the drag and drop UI elements / labels should be the visual second class UI citizen in this particular case.
However, this current design may favour using one method over the other and as such make such analytics less informative.
Thanks for reading.
Originally published at UX / Design / Repeat.